「这是我参与2022首次更文挑战的第12天，活动详情查看： 2022首次更文挑战 」
iframe
是什么？
iframe
标签规定是一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。使用效果如下：
iframe
的优缺点
iframe
能够原封不动的把嵌入的网页展现出来;
iframe
，那么只需要修改
iframe
的内容，就可以实现调用每一个页面的更改，方便快捷;
iframe
嵌套，可以增加代码的可重用;
iframe
会堵塞主页面的Onload事件;
iframe
和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
虽然有很多缺点但是我们日常使用中还是很常见的。
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交互的终结，希望对大家有用，同时也希望大家多多点赞和提意见，这样我才有动力努力创作，最后谢谢大家的浏览！！！
