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