window.postMessage实现网页间通信

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