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

请注意: 由于法律原因，FlashObject已经更名为SWFObject，详见这里。

内容导读

• 新功能
• 实现原理
• SWFObject范例
• 在SWFObject中应用ExpressInstall
• 下载
• 独特优势
• 常见问题

SWFObject 范例

以上我们接触到的范例都最基础的，接下来我们列举一些其他功能，尤其是传入参数、变量这些使用频率较高的行为。

传入Flash内联参数的简单范例

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>

这里可以看到Flash支持的内联参数列表：full list of the current parameters and their possible values（adobe.com官方资源）

采用"Flashvars"参数传入变量

用Flashvars是在预加载Flash时传入数据的最佳做法，语法格式与GET变量串非常类似，如：variable1=value1&variable2=value2&variable3=value3SWFObject帮助您将这项工作变得更加明确化

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.addVariable("variable1", "value1");
so.addVariable("variable2", "value2");
so.addVariable("variable3", "value3");
so.write("flashcontent");
</script>

这些变量将会保存在_root这个MovieClip对象里。

SWFObject还可以方便地直接从URL中接受参数传入Flash中，例如你有这样一个URL：http://www.example.com/page.html?variable1=value1&variable2=value2。采用getQueryParamValue()方法你就可以轻松获取这些参数，并将它们传入Flash，例如：

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.addVariable("variable1", getQueryParamValue("variable1"));
so.addVariable("variable2", getQueryParamValue("variable2"));
so.write("flashcontent");
</script>

getQueryParamValue()方法同样可以获取JavaScript的Location对象的hash值“location.hash”来与swf内部进行通信。这里是一个采用SWFObject的应用程序，其中用到了location.hash对象：链接地址

在SWFObject中应用Express Install（利用官方自动升级接口）

SWFObject全面支持AdobeFlash播放器的自动升级功能(从6.0.65起的FlashPlayer支持在swf内部自动升级!)，这样用户完全不用离开您的网页就能完成播放器的升级了。

首先，上传官方的expressinstall.swf到您的服务器上，然后使用useExpressInstall方法指定这个swf文件的地址就可以了，例如：

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
so.useExpressInstall('expressinstall.swf');
so.write("flashcontent");
</script>

您可以安装一个低版本的Flash播放器然后访问这个页面看到效果

在SWFObject原文件压缩包中您可以找到具体的使用细节，您可以自己定制ExpressInstall的流程。

如果您的Flash影片在弹出窗口中，或者您希望用户在完成了ExpressInstall后重定向到其他地址，你可以采用xiRedirectUrl属性，来自动完成这一步骤。例如：

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
so.useExpressInstall('expressinstall.swf');
so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // must be the absolute URL to your site
so.write("flashcontent");
</script>

独特优势

多年以来，各种各样的Flash播放器版本检测代码层出不穷，包括嵌入脚本也有许多。我们在这一部分针对流行的几种方法进行一个比较。

1) Adobe官方做法

这就是经典的Object标签和Embed标签配合做法，也是目前最常用的做法：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

虽然是目前最常用的方法，但仍然有一些问题。

• 缺乏播放器版本检测 没有播放器插件版本检测，用户会获得非常糟糕的体验，他们会在不知情的情况下看到ActiveX插件安装入口，这样会导致大部分用户离开。而且，用低版本播放器播放高版本的swf文件，会导致更多潜在问题，而用户会将一切问题归咎于您的产品
• Eolas专利纠纷导致IE的近期发行版中需要进行一次“激活”点击才可以完成和Flash内容的交互。详细内容
• 不符合XHTML规范 - 在HTML和XHTML中都没有embed标签HTML or XHTML。因为object标签在不同浏览器中的诡异表现，我们不得不用embed标签来完善最终效果。

2) 仅采用Object标签 / Flash satay

这种方法在2002年的A List Apart article出现之后开始大面积流行，这里有两个例子：

'仅含Object标签'

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="300" height="120">
<param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<!--[if !IE]> <-->
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
width="300" height="120" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>

Flash satay

<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
<img src="noflash.gif"
width="200" height="100" alt="" />
</object>

• 可用性问题 - 采用 Flash Satay 的话， 一些屏幕阅读器会忽略swf内容.
• Eolas专利纠纷导致IE的近期发行版中需要进行一次“激活”点击才可以完成和Flash内容的交互。详细内容
• 缺乏播放器版本检测 没有播放器插件版本检测，用户会获得非常糟糕的体验，他们会在不知情的情况下看到ActiveX插件安装入口，这样会导致大部分用户离开。而且，用低版本播放器播放高版本的swf文件，会导致更多潜在问题，而用户会将一切问题归咎于您的产品
• 早期的的Safari会忽略param标签 - 在这些版本：2.0 (Tiger) 或者 1.3 (Panther) 或者可能 1.2.8 (前Panther) 之前，Safari 完全忽略param 标签。这将会让你的Flashvars等参数无法传入。

3) 'small flash movie on the index page' 检测方法

这个方法会通过在首页放一个swf文件去访问$version 变量来返回版本信息。

问题在于：

• 内页无检测 - 内页如果不放着这个swf就无法检测
• “激活”问题
• 不符合HTML或者XHTML规范
• 影响搜索引擎索引排名

4) Adobe官方 Flash Player Detection 模块

Adobe官方这个模块非常不错，然而仍然有一些不足，它采用两种方法来检测

1. Flash自身检测，如上面提到的"small Flash movie on the index page" - 缺点已经提过了
2. Javascript - 混乱的代码让你的HTML变得非常难以维护

深入讨论在这里。

5) 用纯粹的JS来检测、嵌入

这种方法看起来不错，但是仍然缺乏规范，而且消耗开发成本

• 检测不够完善 - 通常只能检测到当前的Flash播放器发行版，而且升级也需要手工参与
• 增加了 更多 代码 - 难以维护的DOM结构
• 解决方案太笨重 - SWFObject进行了多次优化，非常轻量

常见问题

这里进入论坛可以与其他用户交流

问. 在Flash资源加载前，相关区域的内容会有闪烁(仅IE有)

答. 这与 FOUC bug有关。

问. 用 SWFObject 嵌入多个SWF该怎么做?

答. 只要给每一个HTML结点唯一的id就可以了。

问. 如何使SWFObject兼容Netscape 4.x?

答. 这条评论包含相关信息。

问. 我如何在blog中使用SWFObject?

答. 这里有针对WordPress的插件： 这里。

问. SWFObject 是否可以与 Dreamweaver 、 Golive协同工作?

答. 这里可以得到一个Dreamweaver 扩展在CommunityMX。目前还没有GoLive扩展。

问. 哪里可以找到其他语言的翻译?

答. 法语 ,瑞典语, 意大利语, 德语, 西班牙语, 波兰语(部分), 日语, 葡萄牙语,和 芬兰语。

问. 有支持FlashIDE的发布插件么？

答. 有！你可以在这里得到： Fluid Flash Blog。

问. 谁在使用SWFObject/FlashObject?

答. 这些网站： The Library of Congress, Adobe.com (制定的轻量版本), Amazon.com, Windows.com, YouTube.com, skype.com, Snapple.com, 包括 Adobe Photoshop (在Flash画廊中的) 和大量其他的网站. Colin Moock 也 推荐这种解决方案。

仍然有疑问? 这里有我之前的一些文章[1, 2, 3] 这些日志，以及评论含有许多丰富的解决思路。

致谢

Toby Boudreaux给了我大量的建议，让我的代码更加快捷可靠。