Window postMessage() 方法
定义和用法
postMessage() 方法用于安全地实现跨源通信。
语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
| 参数 | 说明 |
| otherWindow | 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。 |
| message | 将要发送到其他 window的数据。 |
| targetOrigin | 指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI。 |
| transfer | 可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。 |
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>父页面</title> </head> <body> <h1>这是父页面</h1> <div> <textarea id="text" value="消息内容"></textarea><br> <button id="sendMessage">发送消息</button> </div> <br><br> <h3>这是被嵌套的页面</h3> <iframe id="receiver" src="iframe.html" width="300" height="200"> <p>你的浏览器不支持 iframe。</p> </iframe> <script> var btn = document.querySelector("#sendMessage"); var input = document.querySelector("#text"); btn.addEventListener("click", function (e) { document.querySelector("#receiver").contentWindow.postMessage(input.value, "http://localhost:8888");//传信息给iframe页面 }); function getIframeMessage(msg) { input.value = "获取到了子页面的信息：" + msg; } </script> </body> </html>
iframe.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>被嵌套页面</title> </head> <body> <div id="recMessage"> </div> <br><br> <div> <input id="text" type="text" value="传递给父页面的消息内容"/> <button id="sendMessage">发送消息</button> </div> <script> var messageEle = document.getElementById("recMessage"); //监听父页面传递的信息---------------------------------------- window.addEventListener("message", function (e) { /* e.source – 消息源，消息的发送窗口/iframe。 e.origin – 消息源的 URI(可能包含协议、域名和端口)，用来验证数据源。 e.data – 发送过来的数据。 */ if (e.origin !== "http://localhost:8888") return alert("未知来源地址：" + e.origin); // 验证消息来源地址 messageEle.innerHTML = "从" + e.origin + "<br>收到消息： " + e.data; }); //传递信息给父页面---------------------------------------- var btn = document.getElementById("sendMessage"); btn.addEventListener("click", function (e) { var val = document.getElementById("text").value; window.parent.getIframeMessage(val); }); </script> </body> </html>
父页面传信息给子页面
子页面传信息给父页面
