實例
父頁面發消息給子頁面，子頁面接收消息后回復父頁面。
父頁面代碼：
<body> 父級頁面： <button id="btn">給iframe子頁面傳遞消息button</button> <iframe src="index2.html" id="iframe1"></iframe> <script> var btn = document.getElementById('btn'); btn.addEventListener('click',function() { var data = { message: '子頁面應該接收的消息' } // 給子頁面發送消息 document.getElementById('iframe1').contentWindow.postMessage(data,"/"); },false); // 接收子頁面傳遞的消息 window.addEventListener('message',function(e) { console.log(e.data); // 父頁面：我接收到消息了 },false); </script> </body>
iframe子頁面代碼：
<script type="text/javascript"> // 接收父頁面發送的內容 window.addEventListener('message',function(e) { console.log(e.data) // {message: "子頁面應該接收的消息"} // 接收內容后，我們也可以給父頁面發消息 window.parent.postMessage('父頁面：我接收到消息了','/'); },false); </script>
message事件
- data 包含任意字符串數據，由原始腳本發送
- origin 一個字符串，包含原始文檔的方案、域名以及端口(如：http://domain.example:80)
- lastEventId 一個字符串，包含了當前的消息事件的唯一標識符。
- source 原始文件的窗口的引用。更確切地說，它是一個WindowProxy對象。
- ports 一個數組，包含任何MessagePort對象發送消息。
我們可以打印下子頁面接收父頁面的消息的對象，如下：
// 接收父頁面發送的內容 window.addEventListener('message',function(e) { console.log(e) },false);
打印結果：
postMessage方法
postMessage方法支持兩個參數，具體參考下表：
- message：發送的數據
- targetOrigin： 發送數據的來源
postMessage方法中的message參數不僅僅可以是字符串，結構對象、數據對象(如：File和ArrayBuffer)或是數組都是可以的。在IE8/IE9/FireFox3.6及其以下版本只支持字符串數據。
targetOrigin參數指接收文檔的來源。除非接收信息瀏覽上下文來源於提供的targetOrigin中的一個匹配，否則瀏覽器是不會發送消息的。直接使用"*"通配符繞開限制，但顯然這樣很不安全。您在實際使用的時候務必指定目標來源。您還可以通過使用"/"來限制信息只能同源發送。