我們在前端頁面開發(fā)中猪钮，常常會用到iframe党饮。
而且我們在使用iframe的時候涂滴，大多數(shù)情況下不單單只是為了顯示頁面友酱，還要與父窗口進(jìn)行交互，這時候就出現(xiàn)了跨域問題柔纵，iframe頁面并不能直接操作父窗口的元素缔杉。
我們可以使用html5的postMessage()解決這個問題。
一搁料、什么是跨域
跨域或详，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本系羞。它是由瀏覽器的同源策略造成的，是瀏覽器施加的安全限制霸琴。所謂同源是指相同的域名椒振、協(xié)議和端口，只要其中一項不同就為跨域梧乘。
舉幾個例子：
- 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
其他窗口的一個引用，寫的是你要通信的window對象欺冀。
例如在iframe中向父窗口傳遞數(shù)據(jù)時树绩，可以寫成window.parent.postMessage()，window.parent表示父窗口隐轩。 - message
需要傳遞的數(shù)據(jù)饺饭，字符串或者對象都可以。 - targetOrigin
表示目標(biāo)窗口的源职车，協(xié)議+域名+端口號瘫俊，如果設(shè)置為“*”，則表示可以傳遞給任意窗口悴灵。在發(fā)送消息的時候扛芽，如果目標(biāo)窗口的協(xié)議、域名或端口這三者的任意一項不匹配targetOrigin提供的值积瞒，那么消息就不會被發(fā)送川尖；只有三者完全匹配，消息才會被發(fā)送茫孔。例如：
window.parent.postMessage('hello world','http://a.123.com:8080/index.html')
只有父窗口是http://a.123.com:8080時才會接受到傳遞的消息庐船。
- [transfer]
可選參數(shù)银酬。是一串和message 同時傳遞的 Transferable 對象嘲更，這些對象的所有權(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 時消息發(fā)送方窗口的 origin（域名、協(xié)議和端口）
console.log(e.source) //e.source為對發(fā)送消息的窗口對象的引用李破，可以使用此來在具有不同origin的兩個窗口之間建立雙向通信
})
三宠哄、iframe與父窗口交互數(shù)據(jù)例子
iframe傳遞關(guān)閉命令
父窗口接收到命令將iframe關(guān)閉
四、安全問題
- 如果你不希望從其他網(wǎng)站接收message嗤攻，請不要為message事件添加任何事件監(jiān)聽毛嫉。
- 如果你確實希望從其他網(wǎng)站接收message，請始終使用origin和source屬性驗證發(fā)件人的身份妇菱。任何窗口都可以向任何其他窗口發(fā)送消息承粤，并且你不能保證未知發(fā)件人不會發(fā)送惡意消息。而且在驗證身份后闯团，你仍然應(yīng)該驗證接收到的消息的語法辛臊，防止非法攻擊（例如SQL注入）。
- 使用postMessage將數(shù)據(jù)發(fā)送到其他窗口時房交，應(yīng)該指定精確的目標(biāo)origin彻舰，而不是*。惡意網(wǎng)站可以在你不知情的情況下更改窗口的位置候味，因此它可以攔截使用postMessage發(fā)送的數(shù)據(jù)刃唤。
五、兼容性
- IE6白群，IE7不支持尚胞。
- IE8+雖然支持postMessage，但只支持iframe的方式川抡，window.open打開的新窗口之間辐真，沒法用。直到IE10才有相關(guān)改進(jìn)崖堤。
————
前端·小w
紙上學(xué)來終覺淺侍咱，絕知此事要躬行
