什么是跨域？
跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器施加的安全限制。所謂同源是指相同的域名、協議和端口，只要其中一項不同就為跨域。
舉幾個例子：
- http://a.123.com/index.html和http://a.123.com/index.js非跨域，它們有相同的域名，協議和端口。
- http://a.123.com/index.html和http://b.123.com/index.js跨域，相同的端口、協議，但是域名不同（a.123.com和b.123.com）。
- http://a.123.com:8080/index.html和http://a.123.com:8081/index.js跨域，相同的域名、協議，但是端口不同（8080和8081）。
- http://a.123.com/index.html和https://a.123.com/index.js跨域跨域，相同的域名、端口，但是協議不同（http和https）。
【發送消息】
otherWindow.postMessage(message, targetOrigin, [transfer])
- otherWindow
其他窗口的一個引用，寫的是你要通信的window對象。
例如在iframe中向父窗口傳遞數據時，可以寫成window.parent.postMessage()，window.parent表示父窗口。 - message
需要傳遞的數據，字符串或者對象都可以。 - targetOrigin
表示目標窗口的源，協議+域名+端口號，如果設置為“*”，則表示可以傳遞給任意窗口。在發送消息的時候，如果目標窗口的協議、域名或端口這三者的任意一項不匹配targetOrigin提供的值，那么消息就不會被發送；只有三者完全匹配，消息才會被發送。例如：
window.parent.postMessage('hello world','http://a.123.com:8080/index.html') 只有父窗口是http://a.123.com:8080時才會接受到傳遞的消息。
- [transfer]
可選參數。是一串和message 同時傳遞的 Transferable 對象，這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。我們一般很少用到。
【接收消息】
window.addEventListener('message', function (e) { console.log(e.data) //e.data為傳遞過來的數據 console.log(e.origin) //e.origin為調用 postMessage 時消息發送方窗口的 origin（域名、協議和端口） console.log(e.source) //e.source為對發送消息的窗口對象的引用，可以使用此來在具有不同origin的兩個窗口之間建立雙向通信 }) 
iframe傳遞關閉命令
父窗口接收到命令將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>