Javascript使用postMessage對iframe跨域通訊

今天才發現原來有這麼個好東西啊，跨域通訊太方便了，
舉個小栗子：

共兩個頁面，

頁面1：www.a.com/a.html
頁面2：www.b.com/b.html

實現目標：兩個網站頁面實現跨域相互通訊
當前例子依賴於 jQuery 3.0

頁面代碼：www.a.com/a.html

<iframe id="myIframe" src="http://www.b.com/b.html"></iframe>
<script> var $myIframe = $('#myIframe'); // 注意：必須是在框架內容加載完成後才能觸發 message 事件哦 $myIframe.on('load', function(){ var data = { act: 'article', // 自定義的消息類型、行爲，用於switch條件判斷等。。 msg: { subject: '跨域通訊消息收到了有木有~', author: 'CSDN-神神的蝸牛' } }; // 不限制域名則填寫 * 星號, 不然請填寫對應域名如 http://www.b.com $myIframe[0].contentWindow.postMessage(data, '*'); }); // 註冊消息事件監聽，對來自 myIframe 框架的消息進行處理 window.addEventListener('message', function(e){ if (e.data.act == 'response') { alert(e.data.msg.answer); } else { alert('未定義的消息: '+ e.data.act); } }, false); </script>

頁面代碼：www.b.com/b.html

<script> // 註冊消息事件監聽，對來自 myIframe 框架的消息進行處理 window.addEventListener('message', function(e){ if (e.data.act == 'article') { alert(e.data.msg.subject); // 向父窗框返回響應結果 window.parent.postMessage({ act: 'response', msg: { answer: '我接收到啦！' } }, '*'); } else { alert('未定義的消息: '+ e.data.act); } }, false); </script>

對不一樣瀏覽器應該還須要一些兼容操做，我由於只使用 Chrome 因此就偷個懶不寫啦，能夠去網上搜搜。