我們?cè)谇岸隧?yè)面開發(fā)中，常常會(huì)用到iframe。
而且我們?cè)谑褂胕frame的時(shí)候，大多數(shù)情況下不單單只是為了顯示頁(yè)面，還要與父窗口進(jìn)行交互，這時(shí)候就出現(xiàn)了跨域問題，iframe頁(yè)面并不能直接操作父窗口的元素。
我們可以使用html5的postMessage()解決這個(gè)問題。
一、什么是跨域
跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器施加的安全限制。所謂同源是指相同的域名、協(xié)議和端口，只要其中一項(xiàng)不同就為跨域。
舉幾個(gè)例子：
- http://a.123.com/index.html和http://a.123.com/index.js非跨域，它們有相同的域名，協(xié)議和端口。
- http://a.123.com/index.html和http://b.123.com/index.js跨域，相同的端口、協(xié)議，但是域名不同（a.123.com和b.123.com）。
- http://a.123.com:8080/index.html和http://a.123.com:8081/index.js跨域，相同的域名、協(xié)議，但是端口不同（8080和8081）。
- http://a.123.com/index.html和https://a.123.com/index.js跨域跨域，相同的域名、端口，但是協(xié)議不同（http和https）。
二、postMessage()基本用法
【發(fā)送消息】
otherWindow.postMessage(message, targetOrigin, [transfer])
- otherWindow
其他窗口的一個(gè)引用，寫的是你要通信的window對(duì)象。
例如在iframe中向父窗口傳遞數(shù)據(jù)時(shí)，可以寫成window.parent.postMessage()，window.parent表示父窗口。 - message
需要傳遞的數(shù)據(jù)，字符串或者對(duì)象都可以。 - targetOrigin
表示目標(biāo)窗口的源，協(xié)議+域名+端口號(hào)，如果設(shè)置為“*”，則表示可以傳遞給任意窗口。在發(fā)送消息的時(shí)候，如果目標(biāo)窗口的協(xié)議、域名或端口這三者的任意一項(xiàng)不匹配targetOrigin提供的值，那么消息就不會(huì)被發(fā)送；只有三者完全匹配，消息才會(huì)被發(fā)送。例如：
window.parent.postMessage('hello world','http://a.123.com:8080/index.html')
只有父窗口是http://a.123.com:8080時(shí)才會(huì)接受到傳遞的消息。
- [transfer]
可選參數(shù)。是一串和message 同時(shí)傳遞的 Transferable 對(duì)象，這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。我們一般很少用到。
【接收消息】
window.addEventListener('message', function (e) {
console.log(e.data) //e.data為傳遞過來的數(shù)據(jù)
console.log(e.origin) //e.origin為調(diào)用 postMessage 時(shí)消息發(fā)送方窗口的 origin（域名、協(xié)議和端口）
console.log(e.source) //e.source為對(duì)發(fā)送消息的窗口對(duì)象的引用，可以使用此來在具有不同origin的兩個(gè)窗口之間建立雙向通信
})
三、iframe與父窗口交互數(shù)據(jù)例子
iframe傳遞關(guān)閉命令
父窗口接收到命令將iframe關(guān)閉
四、安全問題
- 如果你不希望從其他網(wǎng)站接收message，請(qǐng)不要為message事件添加任何事件監(jiān)聽。
- 如果你確實(shí)希望從其他網(wǎng)站接收message，請(qǐng)始終使用origin和source屬性驗(yàn)證發(fā)件人的身份。任何窗口都可以向任何其他窗口發(fā)送消息，并且你不能保證未知發(fā)件人不會(huì)發(fā)送惡意消息。而且在驗(yàn)證身份后，你仍然應(yīng)該驗(yàn)證接收到的消息的語(yǔ)法，防止非法攻擊（例如SQL注入）。
- 使用postMessage將數(shù)據(jù)發(fā)送到其他窗口時(shí)，應(yīng)該指定精確的目標(biāo)origin，而不是*。惡意網(wǎng)站可以在你不知情的情況下更改窗口的位置，因此它可以攔截使用postMessage發(fā)送的數(shù)據(jù)。
五、兼容性
- IE6，IE7不支持。
- IE8+雖然支持postMessage，但只支持iframe的方式，window.open打開的新窗口之間，沒法用。直到IE10才有相關(guān)改進(jìn)。
