postMessage和onmessage Cross-document messaging
阿新 • • 發佈：2018-12-27
解決了在網頁文件之間互相接收與傳送資訊的功能問題。
由於同源策略的限制，JavaScript 跨域的問題，一直是一個頗為棘手的問題。HTML5 提供了在網頁文件之間互相接收與傳送資訊的功能。使用這個功能，只要獲取到網頁所在視窗物件的例項，不僅同源（域 + 埠號）的 Web 網頁之間可以互相通訊，甚至可以實現跨域通訊。 要想接收從其他視窗傳送來的資訊，必須對視窗物件的 onmessage 事件進行監聽，其它視窗可以通過 postMessage 方法來傳遞資料。該方法使用兩個引數：第一個引數為所傳送的訊息文字，但也可以是任何 JavaScript 物件（通過 JSON 轉換物件為文字），第二個引數為接收訊息的物件視窗的 URL 地址，可以在 URL 地址字串中使用萬用字元'*'指定全部地。
為了實現不同域之間的通訊，需要在作業系統的 hosts 檔案新增兩個域名，進行模擬。
- hosts 檔案中新增兩個不同的域名
127.0.0.1 parent.com
127.0.0.1 child.com
在父網頁中通過 iframe 嵌入子頁面，並在 JavaScript 程式碼中呼叫 postMessage 方法傳送資料到子視窗。
- 父頁面中嵌入子頁面，呼叫 postMessage 方法傳送資料
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" - 子視窗中監聽 onmessage 事件，顯示父視窗傳送來的資料.。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web page from child.com</title>
<script type="text/JavaScript">
//event 引數中有 data 屬性，就是父視窗傳送過來的資料
window.addEventListener("message", function( event ) {
// 把父視窗傳送過來的資料顯示在子視窗中
document.getElementById("content").innerHTML+=event.data+"<br/>";
}, false );
</script>
</head>
<body>
Web page from http://child.com:8080
<div id="content"></div>
</body>
</html>