<iframe> 标签规定一个内联框架（即行内框架)。被用来在当前 HTML 文档中嵌入另一个文档。所有的主流浏览器都支持<iframe>标签。
1、iframe的使用
通常使用iframe直接在页面嵌套iframe标签指定的src就可以了。
示例：
<iframe id="myFrame" scrolling="no" frameborder="0" src=" " style="width:100%;height:100%"></iframe>
2、获取iframe中的内容
let iframe = document.getElementById("myFrame"); //获取iframe标签
let iwindow = iframe.contentWindow; //获取iframe的window对象
let idoc = iwindow.document; //获取iframe的document对象
console.log(idoc.documentElement); //获取iframe的html
console.log("body",idoc.body);
3、获取父页面的元素
父页面代码：
<body>
<div id="modal-1">div内容</div>
<iframe src="child.html"></iframe>
</body>
子页面代码（iframe）：
let iframe = parent.document.getElementById("modal-1"）
4、iframe 子页面调用父页面的方法
父页面代码：
<body>
<div id="default">div内容</div>
<iframe src="child.html"></iframe>
</body>
<script>
function test() {
alert('Hello World!');
}
</script>
子页面代码：
<body>
<div>iframe子页面内容</div>
</body>
<script>
$(function() {
//在iframe子页面中查找父页面元素
alert($('#default', window.parent.document).html());
//在iframe中调用父页面中定义的变量
alert(parent.value);
//在iframe中调用父页面中定义的方法
parent.test();
});
</script>
5父页面调用子页面方法
父页面：
<iframe id="myFrame" scrolling="no" frameborder="0" src=" " style="width:100%;height:100%"></iframe>
<script>
//当iframe加载完成，调用iframe嵌套页面方法传递参数
//若找不到方法,可能是iframe还没有加载完成
$("#myFrame").load(function(){
$("#myFrame")[0].contentWindow.getParentParam(传递到子页面的参数);
});
</script>
子页面：
function getParentParam(parentPageParam){
方法体。。。;
}
6、iframe背景透明
父页面
<iframe id="myFrame" allowtransparency='true'></iframe>
子页面
<body style="background-color: transparent;">
<div></div>
</body>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
