更改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)

})

项目中需要对iframe引用的网页进行样式修改，使用js的元素查询功能进行 *** 作，如图中希望对iframe中的ul高度进行 *** 作

//通过contentWindow来查询iframe内部元素

如果是id选择器则值选中一个元素，直接可使用，若使用class等选择器选择的为多个元素，即使实际只有一个元素也需要遍历

此 *** 作必须在window.onload = function(){}内进行

修改iframe内部元素样式，并且内部内容高度自适应：

<iframe srcdoc="" frameborder="0" id="demo" style="vertical-align:topwidth: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)

}

---