window.postMessage() 方法可以安全地实现跨域通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
一、安装live-server
要想实现跨窗口通信，必须要在服务器上运行，直接用浏览器打开HTML文件只能处理单个文件，窗口之间无法通信。
npm install -g live-server
使用命令live-server进行启动。
安装live-server，在任意位置启动服务器。
在服务器中启动之后，会看见文档中多了一个script标签。这段代码是由live-server插入的。当运行在后台的live-server检测到文件变化，就会通过websockt向网页发送“reload”消息，从而可以实现浏览器中的网页总是实时的响应文件的变更。
-
// <![CDATA[ <-- For SVG support
-
if (
'WebSocket'
in
window) {
-
(
function() {
-
function refreshCSS() {
-
var sheets = [].slice.call(
document.getElementsByTagName(
"link"));
-
var head =
document.getElementsByTagName(
"head")[
0];
-
for (
var i =
0; i < sheets.length; ++i) {
-
var elem = sheets[i];
-
head.removeChild(elem);
-
var rel = elem.rel;
-
if (elem.href &&
typeof rel !=
"string" || rel.length ==
0 || rel.toLowerCase() ==
"stylesheet") {
-
var url = elem.href.replace(
/(&|\?)_cacheOverride=\d+/,
'');
-
elem.href = url + (url.indexOf(
'?') >=
0 ?
'&' :
'?') +
'_cacheOverride=' + (
new
Date().valueOf());
-
}
-
head.appendChild(elem);
-
}
-
}
-
var protocol =
window.location.protocol ===
'http:' ?
'ws://' :
'wss://';
-
var address = protocol +
window.location.host +
window.location.pathname +
'/ws';
-
var socket =
new WebSocket(address);
-
socket.onmessage =
function(msg) {
-
if (msg.data ==
'reload')
window.location.reload();
-
else
if (msg.data ==
'refreshcss') refreshCSS();
-
};
-
console.log(
'Live reload enabled.');
-
})();
-
}
-
// ]]>
二、基础知识
MessageEvent有以下几个属性：
- data：从其他window中传递过来的对象
- origin：调用 postMessage 时消息发送方窗口的 origin
- source：对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。
在发送数据窗口执行：otherWindow.postMessage(msg,origin)
- otherWindow:表示接受数据的窗口的window对象，包括iframe的子窗口和通过window.open打开的新窗口。
- msg表示要发送的数据，包扩字符串和对象(ie9以下不支持，可以利用字符串和json互换)。
- origin表示接收的域名。
三、最简单的一个demo
父窗口打开一个子窗口，然后询问子窗口：“吃饭了吗”，子窗口回复父窗口：“吃了”
father.html
-
<html>
-
-
<body>
-
-
</body>
-
<script>
-
window.addEventListener("message", function(e) {
-
document.querySelector("body").appendChild(document.createTextNode('son say: ' + e.data))
-
})
-
var son = window.open("son.html")
-
son.onload = function() {//必须得要等到儿子加载完成才可以说话
-
son.postMessage("吃饭了吗", location.href)
-
}
-
</script>
-
-
</html>
-
son.html
-
<html>
-
-
<body>
-
-
</body>
-
<script>
-
window.addEventListener("message", function() {
-
console.log(event)
-
document.querySelector("body").appendChild(document.createTextNode("father say: " + event.data))
-
event.source.postMessage("吃了", event.origin)
-
})
-
</script>
-
-
</html>
四、一个网页聊天系统
father.html
-
<html>
-
-
<head>
-
<style>
-
textarea,
-
input {
-
width: 80%;
-
font-size: 20px;
-
font-family: "Consolas";
-
}
-
-
textarea {
-
height: 80%;
-
}
-
-
input {
-
height: 10%;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div style="text-align:center">
-
<textarea readonly></textarea>
-
<input type="text" style="margin-top:10px" onkeydown="keydown()">
-
</div>
-
</body>
-
<script>
-
function $(sel) {
-
return document.querySelector(sel)
-
}
-
window.addEventListener("message", function() {
-
$("textarea").value += "\nson say: " + event.data
-
})
-
var son = window.open("myson.html")
-
-
function keydown() { //这里不需要传递参数，直接使用event就可以
-
if (event.keyCode == 13) {
-
son.postMessage($("input").value, location.href)
-
$("textarea").value += "\n我说：" + $("input").value
-
$("input").value = ""
-
event.preventDefault
-
}
-
}
-
</script>
-
-
</html>
myson.html
-
<html>
-
-
<head>
-
<style>
-
textarea,
-
input {
-
width: 80%;
-
font-size: 20px;
-
font-family: "Consolas";
-
}
-
-
textarea {
-
height: 80%;
-
}
-
-
input {
-
height: 10%;
-
}
-
</style>
-
</head>
-
-
<body>
-
-
<div style="text-align:center">
-
<textarea readonly></textarea>
-
<input type="text" style="margin-top:10px" onkeydown="keydown()">
-
</div>
-
</body>
-
<script>
-
var father = null
-
window.addEventListener("message", function() {
-
$("textarea").value += "\nfather say: " + event.data
-
if (father == null) {
-
father = {
-
source: event.source,
-
origin: event.origin
-
}
-
}
-
})
-
-
function $(sel) {
-
return document.querySelector(sel)
-
}
-
-
function keydown() { //这里不需要传递参数，直接使用event就可以
-
if (event.keyCode == 13) {
-
father.source.postMessage($("input").value, location.href)
-
$("textarea").value += "\n我说：" + $("input").value
-
$("input").value = ""
-
event.preventDefault
-
}
-
}
-
</script>
-
-
</html>
五、最后一个demo
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
</head>
-
-
<body>
-
<input type="button" value="Open Window" onclick="openWin()" />
-
</body>
-
<script>
-
window.addEventListener("message", function(evt) {
-
var ele = document.createElement("pre")
-
ele.innerText = "son say:" + JSON.stringify(evt.data)
-
document.querySelector("body").appendChild(ele)
-
})
-
-
var popupwin = window.open("son.html");
-
//onload只能执行一次，也就是如果子窗口有onload事件，可能会覆盖。
-
popupwin.onload = function(e) {
-
var params = "天下大势为我所控"
-
var origin = location.href
-
popupwin.postMessage(params, origin);
-
}
-
popupwin.onunload = function(e) {
-
var ele = document.createElement("h1")
-
ele.innerText = "儿子最后说:" + popupwin.returnValue
-
document.querySelector("body").appendChild(ele)
-
}
-
</script>
-
-
</html>
son.html
-
<html>
-
-
<head>
-
<title>popup window</title>
-
</head>
-
-
<body>
-
<button onclick="closeWin()">点我返回</button>
-
<div id="show"></div>
-
</body>
-
<script>
-
function closeWin() {
-
window.returnValue = "这是返回值";
-
window.close();
-
}
-
//HTML DOM fully loaded, and fired window.onload later.
-
document.onreadystatechange = function() {
-
if (document.readyState === 'complete') {
-
window.addEventListener('message', function(event) {
-
document.querySelector("#show").appendChild(document.createTextNode("father say:" + e.data))
-
event.source.postMessage("what's the fuck", event.origin)
-
});
-
}
-
};
-
</script>
-
-
</html>
六、安全问题
如果您不希望从其他网站接收message，请不要为message事件添加任何事件侦听器。
如果您确实希望从其他网站接收message，请始终使用origin和source属性验证发件人的身份。
当您使用postMessage将数据发送到其他窗口时，始终指定精确的目标origin，而不是*。
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
