postMessage 死循環與 window.parent

原文連接: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許可協議。轉載請註明出處！