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许可协议。转载请注明出处！