关于前端:html-父子页面iframe双向发消息

某天，领导提了一个需要，主页面外面嵌套iframe，父子页面双向发送音讯。而后我就提了一个计划： postMessage

常识实践筹备：

postMessage办法容许来自不同源的脚本采纳异步形式进行无限的通信，能够实现跨文本档、多窗口、跨域消息传递。

语法：

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow：其余窗口的援用，如 iframe的contentWindow、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message：将要发送到其余window的数据。
targetOrigin：指定那些窗口能接管到音讯事件，其值能够是字符串 “*” 示意无限度，或者是一个URI。
transfer：是一串和message同时传递的Transferable对象，这些对象的所有权将被转移给音讯的接管方，而发送方将不再保留所有权。

postMessage办法被调用时，会在所有页面脚本执行结束之后像指标窗口派发一个 MessageEvent 音讯，该MessageEvent音讯有四个属性须要留神：

type：示意该message的类型
data：为 postMessage 的第一个参数
origin：示意调用postMessage办法窗口的源
source：记录调用postMessage办法的窗口对象

1、操作流程如下：

1.筹备两个页面

http://a.com/main.html 主页面
http://b.com/iframepage.html 嵌套页面

main.html

`<!DOCTYPE html> <html><head><meta charset="utf-8"><title>iframe+postMessage 跨域通信 主页面</title></head><body>    <h1>主页面</h1>    <iframe id="child" src="http://b.com/iframepage.html"></iframe>    <div>        <h2>主页面接管音讯区域</h2>        <span id="message"></span>    </div></body> </html>`

iframepage.html

`<!DOCTYPE html><html><head><meta charset="utf-8"><title>iframe+postMessage跨域通信 子页面</title></head><body>    <h2>子页面</h2>    <div>        <h3>接管音讯区域</h3>        <span id="message"></span>    </div></body></html>`

2、父向子发送音讯

main.html

`<script>    window.onload = function(){        document.getElementById('child')         .contentWindow.postMessage("主页面音讯",                 "http://b.com/iframepage.html")    }</script>`

留神：
肯定是页面加载实现后在发送音讯，否则会因为 iframe 未加载实现报错。

`Failed to execute ‘postMessage’ on ‘DOMWindow’`

子页面接管音讯：
iframepage.html

`<script>    window.addEventListener('message',function(event){        console.log(event);        document.getElementById('message').innerHTML = "收到"             + event.origin + "音讯：" + event.data;    }, false);</script>`

此时可看到页面中，iframe的子页面中打印了

收到http://a.com音讯：主页面音讯`

以及控制台打印了MessageEvent对象。

3、子向父发送音讯

子页收到音讯后回复父页面
iframepage.html

<script>    window.addEventListener('message',function(event){        console.log(event);        document.getElementById('message').innerHTML = "收到"             + event.origin + "音讯：" + event.data;        top.postMessage("子页面音讯收到", 'http://a.com/main.html')    }, false);</script>

父页面收到音讯并显示：

window.addEventListener('message', function(event){    document.getElementById('message').innerHTML = "收到"         + event.origin + "音讯：" + event.data;}, false);

4、残缺代码

main.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title>iframe+postMessage 跨域通信 主页面</title></head><body>    <h1>主页面</h1>    <iframe id="child" src="http://b.com/iframepage.html"></iframe>    <div>        <h2>主页面接管音讯区域</h2>        <span id="message"></span>    </div></body> <script>    window.onload = function(){        document.getElementById('child')         .contentWindow.postMessage("主页面音讯",             "http://b.com/iframepage.html")    }    window.addEventListener('message', function(event){        document.getElementById('message').innerHTML = "收到"         + event.origin + "音讯：" + event.data;    }, false);</script></html>

iframepage.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title>iframe+postMessage跨域通信 子页面</title></head><body>    <h2>子页面</h2>    <div>        <h3>接管音讯区域</h3>        <span id="message"></span>    </div></body><script>    window.addEventListener('message',function(event){        if(window.parent !== event.source){return}        console.log(event);        document.getElementById('message').innerHTML = "收到"             + event.origin + "音讯：" + event.data;        top.postMessage("子页面音讯收到", 'http://a.com/main.html')    }, false);</script></html>