postMessage 死循环与 window.parent

2,364 阅读2分钟

原文链接:Rockjins Blog

上礼拜用postMessage进行iframe跨域通信(使用postMessage解决iframe跨域通信问题),因为写的代码不够健壮,其实说到底还是了解的知识点不够多,这个礼拜BUG就提上来了...

我相当于开发一个中间层框架,在我外层有一个大框架用iframe包着我,我再用iframe包着另一个页面,如图(配色好评):

按理说用postMessage是不会出问题的:我负责父页面和子页面之间的通信,他们把数据发送给我,我再替他们发送给对方。

但是这几个框架又是相互独立的,只有在特定的情景下才会这样嵌套,BUG就是在页面独立时出现的。

我们知道,获取父级iframe最简单的方法就是window.parent,这样可以拿到父级iframewindow对象,我大概就是这样发送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许可协议。转载请注明出处!