修改iframe里面的样式(怎么改变iframe背景色)
iframe样式修改
修改iframe内部元素样式，并且内部内容高度自适应：
iframe srcdoc="" frameborder="0" id="demo" style="vertical-align:top;width:80%" onload="getIframeDom()"/iframe
function getIframeDom(){
$("#demo").contents().find("p").css('margin','0');
$("#demo").contents().find("body").css('margin','0');
changeFrameHeight();
}
window.onresize=function(){
changeFrameHeight();
}
function changeFrameHeight(){
var ifm= document.getElementById("demo");
var iheight=$("#demo").contents().find("body").height();
$("#demo").height(iheight);
}
如何修改iframe中的样式
首先给iframe标签起一个id，页面加载完毕后，在这个id?的contentWindow中找到你要修改的标签的id
window.onload=()={
????????var_iframe=document.getElementById('outBox').contentWindow.document.getElementById('map')//iframe下的id
????????_iframe.style.background="pink";//修改样式
????}
更改iframe内元素样式
所有的操作必须确保在$('iframename').load（function（）{}）内进行；
$('#iframe').load(function（{
? ? ?所要进行的操作
}））确保iframe装载完毕之后进行后续操作；不然你可能得到
var x = document.getElementById('iframe').contentWindow.document.getElementById('container');
console.log(x)?
打印台结果为： // null
var x = document.getElementById('iframe').contentWindow.document
console.log(x)
打印台结果为：
如果要使用jQeury获取frame内元素的话必须确保iframe所引入的页面内引入了jQuery框架；
$('#iframe').load(function () {
? ? var x = document.getElementById('iframe').contentWindow.document.getElementById('container');
? ? x.style.width = "100%";
? ? x.style.height = "100%";
? ? console.log(x)//以iframe中找元素a为例
});
$('#iframe').load(function () {
? ? var cssLink = document.createElement("link");
? ? cssLink.href = "style.css";
? ? cssLink.rel = "stylesheet";
? ? cssLink.type = "text/css";
? ? frames['iframe'].document.body.appendChild(cssLink);
});