我們?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為傳遞過來(lái)的數(shù)據(jù)
console.log(e.origin) //e.origin為調(diào)用 postMessage 時(shí)消息發(fā)送方窗口的 origin（域名、協(xié)議和端口）
console.log(e.source) //e.source為對(duì)發(fā)送消息的窗口對(duì)象的引用妒蔚，可以使用此來(lái)在具有不同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)。
