「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」
iframe是什么？
iframe标签规定是一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。使用效果如下：
iframe的优缺点
优点：
iframe能够原封不动的把嵌入的网页展现出来;- 如果有多个网页引用
iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷; - 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用
iframe嵌套，可以增加代码的可重用;
缺点：
iframe会堵塞主页面的Onload事件;iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。- 代码复杂,无法被一些搜索引擎索引到（有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次）;
- 多框架的页面会增加服务器的http请求，影响页面的并行加载,增加服务器负载;
虽然有很多缺点但是我们日常使用中还是很常见的。
iframe 交互
同域名下iframe父子页面通信
1. 父页面调用子页面方法
//html
<iframe id="zi" name="zi" src="zi.html" frameborder="0"></iframe>
// js
// 获取子页面方法
document.getElementById('zi').contentWindow.ziFn();
// 父页面方法
function fuFn() {
console.log("我是父页面方法");
}
2. 子页面调用父页面方法
// js
function ziFn() {
console.log('我是子页面方法');
}
function func() {
// 通过parent对象获取，window 可以省略
parent.window.fuFn();
}
跨域下iframe父子页面通信
子向父传值
- 子
iframe代码
window.parent.postMessage('msg','*');
- 父
iframe代码
window.addEventListener('message',function(event){
if(event.data=='msg'){
console.log(event);
}
})
父向子传值
- 子
iframe代码
window.addEventListener('message', function() {
if(event.data=='msg'){
console.log(event);
}
});
- 父
iframe代码
fuFrame.contentWindow.postMessage('msg','*');
注意事项：
- 父窗口给子窗口发信息，需要用
iframe的contentWindow属性作为调用主体; - 子窗口给父窗口发的信息需要使用
window.parent，多层iframe使用window.frameElement,获取顶层窗口可以用window.top; - 要确保在
iframe加载完成，如iframe还未加载完成就开始调用里面的方法或变量，会报错。可以用onload事件或者用document.readyState=="complete"来判断是否加载完成;
总结
以上就是我对iframe交互的终结，希望对大家有用，同时也希望大家多多点赞和提意见，这样我才有动力努力创作，最后谢谢大家的浏览！！！
