使用SWFObject插入Flash在IE下导致stageWidth为0的解决方法

SWFObject
SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源(*.swf文件)的独立、敏捷的JavaScript模块。该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外,它能够避免您的 HTML、XHTML中出现object、embed等非标准标签,从而符合更加标准。

SWFObject在IE下的BUG
如果Flash里绘制的对象的宽高是自适应Flash的宽高的,那么,使用SWFObject来插入Flash在IE会导致一个问题,当这个Flash被缓存后,也就是第二次访问该页面时,在该Swf文件被加载时,获取到的stage.stageWidth和stage.stageHeight为0,绘制的对象也就看不到了。


在Flash里监听resize事件,找出解决方法
如下(如果加载较慢就先等等吧~):
查看演示

用IE的话,会看到5行,有两次resize事件,这也就导致了Flash在加载的时候绘制对象错误(宽和高为0):
数字是stage.stageWidth和stage.stageHeight

info
resize
0 x 0
resize
300 x 300

如果用Firefox等浏览器,只输出两行文字,没有resize事件:

info
300 x 300

AS里的解决方案
通过监听resize事件,当stage.stageWidth和stage.stageHeight大于0时再进行初始化


package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;

    public class AutoSizeExample extends Sprite
    {
        private var txt:TextField;
        public function AutoSizeExample()
        {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

            txt = new TextField();
            txt.multiline = true;
            txt.wordWrap = true;
            txt.text = "info\n";
            addChild(txt);

            if (stage.stageWidth>0 && stage.stageHeight>0){
                createChild();
            }else{
                stage.addEventListener(Event.RESIZE,onResize);
            }
        }

        private function onResize(e:Event):void
        {
            if (stage.stageWidth>0 && stage.stageHeight>0){
                stage.removeEventListener(Event.RESIZE,onResize); //删除事件监听
                createChild();
            }
            //否则继续监听事件,直到stage.stageWidth和stage.stageHeight大于0时才初始化
        }

        private function createChild():void
        {
            //进行初始化操作,创建各对象
            //.......................
            var w:Number = stage.stageWidth;
            var h:Number = stage.stageHeight;

            txt.appendText(w + " x " + h + "\n");
        }

    }
}



SWFObject.js里的解决方案
在swfobject.js里找到函数function createSWF(attObj, parObj, id)
里面针对winIE的处理方法是:el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';
看了一下Adobe自己的AC_OETags.js,他是用document.write方法直接写入,没有这个问题;
直接写静态html(object)没有这种问题;
直接访问这个flash的地址,也没有这种问题。
至于el.outerHTML的方式为什么会导致这种问题,还没有深究,暂时还不太清楚是什么原因导致的~

待续~~~

猜你喜欢

转载自zhuxiangyan.iteye.com/blog/817986