今天我們聊一下前端中非常基礎(chǔ)的一個(gè)知識(shí)點(diǎn)——iframe跨域。
作為一名前端，在業(yè)務(wù)中你可能會(huì)遇到這樣一個(gè)場(chǎng)景：自己開(kāi)發(fā)的頁(yè)面中需要通過(guò)iframe嵌入別人的頁(yè)面，比如passport頁(yè)面（登錄），但是常常因?yàn)榭缬騿?wèn)題，導(dǎo)致父子頁(yè)面無(wú)法通信，這時(shí)我們就要想辦法如何在跨域的情況下解決這個(gè)問(wèn)題。
什么是跨域？協(xié)議、域名、端口三者中只要有一個(gè)不一樣就是跨域！
假設(shè)我們有以下場(chǎng)景：
父頁(yè)面a通過(guò)iframe內(nèi)嵌子頁(yè)面b，兩頁(yè)面之間想互相獲取dom等信息，該怎么辦？
a頁(yè)面地址：http://jerry.demo.com:8999/a.html
b頁(yè)面地址：http://channel.demo.com:9999/b.html
圖1
圖2
圖3
如果父子頁(yè)面直接操作對(duì)方，就會(huì)產(chǎn)生圖3中的跨域報(bào)錯(cuò)！
document.domain
如果只是主域名不同，其他都相同，就可以采用這種方式。比如以上場(chǎng)景的情況，可以設(shè)置
document.domain = 'demo.com'；
location.hash
利用頁(yè)面url的hash值解決。
a父頁(yè)面可以將信息放到子頁(yè)面url的hash值中，然后在子頁(yè)面的內(nèi)部監(jiān)聽(tīng)hash值的變化。
圖4
這種實(shí)現(xiàn)方式可以讓子頁(yè)面拿到父頁(yè)面的信息，但是如何讓父頁(yè)面拿到子頁(yè)面的信息呢？
b頁(yè)面改變a頁(yè)面地址hash值，a頁(yè)面監(jiān)聽(tīng)地址欄的變化獲取相應(yīng)的數(shù)據(jù)，但是a、b頁(yè)面不同源，b頁(yè)面不能直接操作改變a頁(yè)面地址的hash值。
于是b可以通過(guò)創(chuàng)建c頁(yè)面（圖6所示），讓c和a同源，把值傳給c，c來(lái)改變a的地址hash（圖7所示），從而達(dá)到a、b的通信。
圖5
圖6
圖7
window.name
window.name是個(gè)特殊的值，無(wú)論是iframe內(nèi)嵌的頁(yè)面還是普通的頁(yè)面都存在這個(gè)變量。它有一個(gè)神器的特點(diǎn)就是只要設(shè)置了這個(gè)值之后無(wú)論如何修改頁(yè)面的地址（哪怕是跨域的地址），這個(gè)值都會(huì)一直存在。（跟著頁(yè)面窗口存在而不是跟著地址存在）
父到子通信：
圖8
在a頁(yè)面中先插入c，a和c同源，所以可以先在a頁(yè)面中操作c頁(yè)面的window.name，然后再把iframe的src指向b頁(yè)面，b和c處于一個(gè)iframe窗口，這時(shí)window.name的值就可以在b頁(yè)面中獲取到！
子到父通信：
圖9
過(guò)程正好反過(guò)來(lái)，先插入b，b頁(yè)面中修改window.name，然后再把iframe頁(yè)面替換成c，因?yàn)閍和c同源，所以a頁(yè)面就能拿到window.name的值。
此處比較尷尬的是需要隱藏iframe。
window.postMessage
HTML5引入了跨文檔通信 API，使用targetWidw.postMessage發(fā)送消息，window.onmessage監(jiān)聽(tīng)接收消息。
圖10
圖11
使用時(shí)，這個(gè)API的兼容性需要考慮一下。
圖12
總結(jié)
iframe跨域的場(chǎng)景還是非常多的，在整個(gè)前端的職業(yè)生涯中肯定會(huì)遇到！如果不了解以上解決問(wèn)題的手段，遇到這類(lèi)問(wèn)題就會(huì)很惱人，希望看完這篇文章的讀者都能完全掌握。
