问题症状:
某个项目中,需要调用window.open()打开一个新窗口,里面会加载一个包含flash的页面。
其它浏览器都没什么问题,但是在Windows XP/7 & Safari 5.1.2 & Adobe Flash Player 11.1.102.55环境中,有相当大的几率会出现如下症状:
弹出新窗口中应该显示的flash的区域,开始会显示一片白板;直到被点击一次,者调整窗口大小,或者切换一次活动窗口之后,才会显示flash内容。
问题原因的查找:
尝试过很多方法,包括以下:
- 直接使用静态<embed>而非动态插入<object>标签来载入flash。
- 更改flash的wmode属性。
- 使用document.wite()或者innerHTML动态生成flash标签代码。
但这些都没有从根本上杜绝bug的出现。
另外还发现:
- 点击打开新窗口的按钮后,立即用鼠标做一些无规则的交互(比如瞎晃动,点击其他窗口,拖拽文本等等),bug重现的几率貌似会高一些。
- 在页面里面同时加载多个flash时,bug重现的几率貌似会很低。
当然上面不排除很多偶然因素,仅凭这两点也还不够充分解释问题的原因。
问题的解决:
最后还是拿出了杀手锏:setTimeout()。
这一招对于很多js的疑难杂症都有妙不可言的效果。
代码示例如下:
window.onload = function() { window.setTimeout(function() { document.body.innerHTML = ('<embed ... ></embed>'); }, 100); };
经过反复的测试,bug在这种写法下暂未再出现:窗口弹出后,flash能够自动显示了,无需再去点击窗口或做其它什么操作了。
暂时可以认为bug出现的几率为0%了。
PS:实际中因为其它需要,最后setTimeout()中加载flash的代码改为了使用swfobject动态加载。
当然因为我还未作更多测试,所以不能保证只用swfobject也能解决这个bug,虽然swfobject内部可能也用到了setTimeout()。
结论:
关键是证实了这个问题:延迟一定的时间再加载flash,基本上可以消除此bug的症状。
参考: