Window postMessage() 方法
定义和用法
postMessage() 方法用于安全地实现跨源通信。
语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
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>
