flash player版本:22.0,在我的开发环境(11.0)中没有出现如下问题。
1.flex组件在舞台中来回切换时iframe元素会多次加载到html元素中
如flex弹出窗口中包含iframe,多次弹出、关闭窗口,会发现html元素中有多个iframe标签,序号会自增,即便是销毁弹出窗口对象也没有用。
用firebug或浏览器自身的查看工具查看html元素,仔细观察会发现,iframe在随flex组件销毁对象时,只是把当前html元素的display属性设置为none,即iframe对象已经销毁,html中添加的iframe元素还存在。
这个时候,如果有操作或事件触发了窗口的resize 事件,那么先前所有的iframe都会触发resize事件,那些已经实际不存在但是还需要resize的iframe就会报错,提示某iframe对应的resize方法找不到。
TypeError: document.getElementById(...).iFrameBySource0_resize is not a function
解决办法:IFrame源码中有这样一句
this.addEventListener(Event.REMOVED_FROM_STAGE, handleRemove);
当iframe被从舞台移除时会触发,那么在handleRemove中调用IFrame中的removeIFrame()方法即可,删除该iframe包裹的html元素。
2.iframe需随flex动画动态改变大小时浏览器卡死
如上图中trigger的点击会触发左边区域以及右边包含lframe的flex区域进行大小的动态改变,动画通过Resize实现
<s:Resize id="leftAreaHideEffect" target="{leftArea}" widthTo="1" duration="100"/>
<pre name="code" class="html"><s:Resize id="leftAreaShowEffect" target="{leftArea}" widthTo="200" duration="100"/>
在100毫秒内左侧区域的宽度会变为1,而右侧的flex区域会随左侧区域宽度的缩小而增大,反之是对应的动画效果。
在向右侧移动时,flex区域的宽度会虽小,对应的iframe区域一样(设置的宽度是100%),这个时候就会出现浏览器卡死的现象,无法调试。
我的猜测是向右侧移动时,iframe的大小受到快速挤压,需要快速的响应布局且改变大小,可能导致了iframe内部错误(或死循环),因为使用flex替换掉该区域的iframe是没有问题的,并且在调试状态或动画时间设置比较大时没有该问题。
由于能力问题并没有找到导致该问题的根本原因,所以先搁置,使用替代方案。
解决办法:flex中Animate类中有一个属性disableLayout,官方给出的解释为:“如果为 true,则效果通过将容器的 autoLayout 属性设置为 false 对其目标的父容器禁用布局,并同时对目标对象禁用任何布局约束。效果完成时,将还原这些属性”。
即在动画期间禁用布局,也就是大小在这个阶段不发生改变,当动画结束时再瞬间达到动画预期的效果。
这样就暂时解决了该问题,但是如果动画效果比较明显且有该问题,这个方法可能不是最佳方案。