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