一直以来都是用swfobject库创建flash。尽管它兼容性比较好,但几百行的代码实在有点累赘,毕竟一个flash元素只需几行HTML就可以创建了。
虽然用<object><embed>创建的和swfobject创建的flash内容一模一样,但有个非常明显的瑕疵:就是前者生成的Flash周围有个灰色边框,并且鼠标移入Flash后,会提示“单击以激活并使用控件”。虽然只出现在部分浏览器上,但这严重影响了美观。
然而使用swfobject.js创建的却没有。我想应该是动态创建,然后加入页面文档,就不会有这些提示。但一番测试,无论是innerHTML写入,还是createElement创建的Flash,仍然存在这些问题。并且为了做到和swfobject一样,我设置了Flash元素的每个可选参数,但仍然一样。
既然完全和swfobject一样的方法创建Flash,为什么我的会有这些东西呢? 我尝试删除swfobject.js里的部分代码,看看少了哪行之后,就会出现提示了。
删了一行又一行,最后意想不到的事发生了,swfobject.js只剩下了一行: el.outerHTML = "<object ....."
原来,无论用什么方法创建,只要创建它的JS是在外部的文件,就不会出现这些提示。而之前我的代码始终写在一个页面里。真的很神奇!
最后,我总结了下,其实加入Flash非常的简单,只需一行就够了(当然是在外部的JS里):
dom.innerHTML = "<embed src=X.swf></embed>";
就能在所有浏览器里插入Flash,需要固定尺寸的话只需加上width和height属性就可以。
这种方法可以满足大多数的Flash,唯一的缺陷就是IE下的Flash不能创建JS回调接口:ExternalInterface.addCallback。解决方法就是在IE下用<object>代替<embed>。