原文連結:Rockjins Blog
上禮拜用postMessage進行iframe跨域通訊(使用postMessage解決iframe跨域通訊問題），因為寫的程式碼不夠健壯，其實說到底還是瞭解的知識點不夠多，這個禮拜BUG就提上來了...
我相當於開發一箇中間層框架，在我外層有一個大框架用iframe包著我，我再用iframe包著另一個頁面，如圖（配色好評）：
按理說用postMessage是不會出問題的:我負責父頁面和子頁面之間的通訊，他們把資料傳送給我，我再替他們傳送給對方。
但是這幾個框架又是相互獨立的，只有在特定的情景下才會這樣巢狀，BUG就是在頁面獨立時出現的。
我們知道，獲取父級iframe最簡單的方法就是window.parent，這樣可以拿到父級iframe的window物件，我大概就是這樣傳送postMessage給父級iframe的：
parent.postMessage('someMessage', '*')
而且postMessage方法的呼叫是寫在onmessage事件裡的，也就是子頁面傳送訊息過來，我監聽到onmessage事件，就傳送訊息給父級iframe。
問題來了，之前說過框架之前都可以獨立執行，如果沒有父級iframe，只剩下我的框架和子框架，會發生什麼呢？
大家來開心一下，就是這樣子：
而且最詭異的一點是，資訊發起人的HOST並不是子頁面,而是我自己？WTF?
我不信，跑去找子頁面的開發負責人，問他是不是寫了死迴圈不停發訊息，對方很坦蕩的把程式碼開啟：“你自己看吧，哪來的死迴圈？”
好吧，回去自己找BUG，經過一個小時的埋頭苦讀，終於發現了問題所在。
我現在問大家一個問題：當你的頁面處於最頂層，也就是外層沒有iframe包裹你，求這時window === window.parent的返回值。
呵呵，居然是true，也就是說，當你的頁面處於最頂層，window.parent指向你自己！
有圖為證：
相當於當你處於最頂層時，你兒子就是你自己，你也可以是自己的爺爺，當然也可以是自己的曾孫，大概就是這個意思，希望大家以後不會遇到這個坑，其實也不算坑啦，說到底還是自己知識面不夠廣，連輪迴這麼簡單的道理都不明白...
本文作者：餘震（Shock）
本文出處：Rockjins Blog
版權宣告：本部落格所有文章除特別宣告外，均採用 CC BY-NC-SA 3.0 CN許可協議。轉載請註明出處！