PostMessage的用法 · 要努力

## 1. 可以实现页面和里面iframe页面之间的通讯 #### 背景：页面A中通过iframe嵌入B页面 * A页面要提交消息给B页面`iframeEle.contentWindow.postMessage() ` * B页面要提交消息给A页面`window.parent.postMessage()` ## 2. 可以实现窗口和通过window.open的窗口间的通讯 #### 背景：页面A通过调用`window.open()`打开B页面 * A页面向B页面发送消息 ``` var openWindow = window.open() setTimeout(function(){ // 如果直接openWindow.postMessage()是不行的，要异步才可以的 openWindow.postMessage() }) ``` * B页面向A页面发送消息`window.opener.postMessage()` ## 实现窗口和通过a标签新打开的窗口间的通讯背景：A页面里面有一个例如：`<a href="B页面" target="_blank">新打开B页面</a>`这样的一个a标签，能够新窗口中打开一个B页面 * B页面向A页面发送消息`window.opener.postMessage()` * 如果A页面想要给B页面也返回消息的话，可以利用message响应事件中的source属性来实现接收消息方法 ``` window.addEventListener('message', function(event){ event.source.postMessage() }) ``` ---------------------------------------------------------------- test.html ``` <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> </head> <body> </body> <script> onmessage=function(e){ e=e||event; document.write("my name is ",e.data); document.body.style.background = 'red'; }; </script> </html> ``` 1.html ``` <!DOCTYPE html> <html> <head> <title>window.postMessage</title> <meta charset="utf-8"/> <h1>test接收区</h1> </head> <body> </body> <iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe> <script> var f=document.getElementById("f"); //给框架网页发送消息，然后收到之后，会传送过来。 f.οnlοad=function(){ setTimeout(function(){ f.contentWindow.postMessage("谢霆锋","http://localhost:8080"); },3000) } </script> </html> ``` >1.html里面镶嵌了一个iframe网页框架，他就是靠这里传输数据的，等1.html加载完成之后，他会主动发给test.html 谢霆锋，然后test.html收到之后，它里面有接收消息的处理函数，他收到消息之后，立马，给网页返回一段字符串，然后把自己的背景改成红色。这样就达到了网页互动的效果，可惜的是，万恶的ie6.7不支持，兼容度不高。