需要注意点:
所有的操作必须确保在$('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)
打印台结果为:
并没有我们引入页面的内容,方法一:直接通过js或者jQ获取iframe DOM节点进行控制
如果要使用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为例
});
方法二:创建link标签,添加到iframe中
$('#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);
});
网友评论