Deconcept - SWFObject(1.5版本)简介

>

SWFObject(1.5版本)简介

Written by Eric Liu

SWFObject，全称为Javascript Flash Player Detection and Embed Script，是用来嵌入Adobe Flash内容的一个很小的JavaScript文件。该脚本目前最新版本为2.1，并且正由code.google.com网站主持和更新。这段脚本代码可以检测出目前主流浏览器中的flash插件，并且被设计成尽可能简单地向网页中嵌入flash电影。与此同时，它也具有对搜索引擎的友好性和向前兼容性并且能够很轻易地在(X)HTML中使用，所以它在几年内都不会过时。

它是如何工作的

使用SWFObject是很容易的，你只需要将swfobject.js文件包含到网页中，然后在页面中加入一小段JavaScript代码来嵌入你的flash电影。下面一段代码显示了向页面中嵌入flash电影所需要的最少量代码：

<script type=”text/javascript” src=”swfobject.js”></script>

<div id=”flashcontent”>

  This text is replaced by the Flash movie.

 </div>

<script type='javascript'>

  var so = new SWFObject(“movie.swf”, “mymovie”, “400”, “200”, “8”, “#336699”);

  so.write(“flashcontent”);

</script>

下面我就来分析一下上面这段代码都干了些什么：

<div id='flashcontent'>[…]</div>

上面这段代码是准备一个容纳flash电影的HTML元素(容器)，而容器元素内部的所有内容将会被flash内容所替代，所以安装了flash插件的用户永远看不到这个容器元素里边的内容。而这种特性具有能让搜索引擎为你预先加入的要被flash电影替换原始内容建立索引的附加功能。

var so = new SWFObject(swf, id, width, height, version, background-color[, quality, xiRedirectUrl, detectKey]);

此段代码的功能是创建一个新的SWFObject对象，同时想对象的构造函数中传入必需(填)参数：

?   Swf – 文件路径和你的swf文件名

?   id – 你的对象或要被嵌入的HTML标记  的ID值。被嵌入的标记也会把这个值所谓其name属性的值

?   width – flash电影的宽度

?   height – flash电影的高度

?   version – 你的flash内容所需要的flash播放器的版本。这个参数可以是一个以” majorVersion.minorVersion.revision”（即主版本.次版本.修订版本）这种形式被格式化的字符串。一个最简单的例子就是”6.0.65”。或者你干脆只些其主版本号亦可，例如”6”，注意，这里是”6”是字符串，不是数字类型。

?   background-color – 这个参数指的是你的flash电影的背景颜色的十六进制值。

以下列示的是可选参数：

?   quality – 你希望你flash电影的播放质量。如果此参数未设定，默认值为”high”。

?   xiRedirectUrl – 若你想重定向完成ExpressInstall升级的用户，那么你可以在这里指定重定向的URL。

?   redirectUrl – 如果你希望重定向那些并未安装正确的插件版本的用户，那么使用该参数可令这些用户重定向URL

?   detectKey – 这时一个当要绕过检测时SWFObject脚本将要寻找的URL变量名称，默认值是”detectflash”。举一个例子：为了绕过flash检测而只是简单将flash电影写到页面上，你可能会添加?detectflash=false到包含flash电影的文档中。

so.write(“flashcontent”);

这段代码是用来告知SWFObject对象通过替换指定的HTML容器元素的内容来将flash电影写到页面上（前提条件是用户系统安装了当前版本的插件） 。

细节

SWFObject能够在你的HTML文档的后台安静地工作。当你使用SWFObject来开发页面时，首先应该从不含flash内容开始。让你的页面在无flash电影页面下正常工作，然后将一小段能够把flash电影替换成容器内容的JavaScript代码加入到页面中。这样做确保了替换的内容将会被搜索引擎索引到，同时也能让那些未安装flash插件的用户看见一个正常工作的HTML页面。是否提供可升级flash的指令完全取决于你(开发者)。倘若你的替代内容能够满足需要的话，那么也就没有任何理由来告知用户缺少必要的flash内容了。

SWFObject能够在目前所有的web浏览器上正常工作，包括运行在PC机上的IE5/5.5/6、Netscape7/8、Firefox、Mozilla和Opera以及运行在Mac机上的IE5.2、Safari、Firefox、Netscape6/7、Mozilla和Opera7.5+，并且以后也能够继续工作的很好。

SWFObject能够在上述浏览器中检测3.0版本以及3.0版本以上flash播放器，同时允许用户在flash插件未被浏览器激活的情况下首先与flash内容进行交互。更多信息请参见发表在the Internet Explorer Eolas Patent Dispute的博客上。

SWFObject也能够检测flash播放器的次版本和修正版本，只需要简单地传递一个你想要检测的版本号的字符串值作为参数即可。下面代码是一个检测6.0 r65(或者6.0.65.0)版本的flash播放器的例子：

var so = new SWFObject(“movie.swf”, “mymovie”, “200”, “100”, “6.0.65”, “#336699”);

SWFObject的内建插件检测也能够被绕过。如果一款新的浏览器被启动或者由于某些原因插件检测未能在用户系统上正常工作，那么你可能会包含一个令SWFObject内建的检测系统不可用的叫做bypass link的链接，同时它也一直会将flash内容写到页面上。为了使用bypass link这个链接，只要简单地将带有你的flash内容的页面链接到它上面即可同时包括一个叫做detectflash的简单的URL变量然后设定他的值为false。下面给出一个实例来演示这个bypass link：

Bypass Link

SWFObject 实例

上面的例子是你使用SWFObject所需的最基本的代码，但是倘若你想使用一些SWFObject插件所提供的其他的参数呢？SWFObject令你添加任何你所需要的额外参数变得非常容易。下面的例子显示了你希望使用的一些不同的嵌入flash内容的方法。

一个添加额外参数的例子

<script type="text/javascript"> 

var so = new SWFObject(“movie.swf”, “mymovie”, “400”, “100%”, “8”, “#336699”);

  so.addParam(“quality”, “low”);

so.addParam(“wmode”, “transparent”);

so.addParam(“salign”, “t”);

so.write(“flashcontent”);

</script>

在abobe.com上列示了目前flash所支持的所有参数和他们可能的值的完整列表。

使用Flashvars参数将变量传递到你的flash电影中：

使用Flashvars从HTML获取数据并加入到你的flash电影中是众多方法中最为简便易行的一种，但是你也只能在flash电影初次加载时传递这些数据。通常情况下你首相会添加一个叫做Flashvars的参数，然后对于它的值，你会像这样传递一个名/值对字符串：variable1=value1&variable2=value2&variable3=value3等等。通过一种添加额外参数的相似的行为，SWFObject能够让你添加尽可能多的变量变得更容易一些。下面这个例子演示了如何使用Flashvars将值传到你的flash电影中：

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");

   so.addVariable("variable1", "value1");

   so.addVariable("variable2", "value2");

   so.addVariable("variable3", "value3");

   so.write("flashcontent");
</script>

一旦这件事情搞定了，所有你所传进来的变量便会在flash电影中立即可用。你可以访问它们就像任何其他变量一样。

SWFObject脚本也内置了一个额外的函数。这个函数允许你把变量追加到URL字符串上。举一个简单的例子，你可能有一个看起来是这样的URL：http://www.example.com/page.html?variable1=value1&variable2=value2。使用getQueryParamValue()这个函数你很容易地从URL中提取这些值然后把它们传到你的flash电影中。这里有一个例子，我们假设URL看起来像是上面我们据的那个例子那样，那么：

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");

   so.addVariable("variable1", getQueryParamValue("variable1"));

   so.addVariable("variable2", getQueryParamValue("variable2"));

   so.write("flashcontent");
</script>

函数getQueryParamValue()也支持从location.hash中读取变量，该变量在当深度链接到你flash应用时偶尔会被使用。对于使用location.hash深度链接你的flash电影的例子，请查看一个叫做this Demo of Slideshow Pro的页面。该页面就使用了嵌入式的SWFObject。

使用SWFObject带有的Express Install

SWFObject完全支持Adobe Flash Player Express Install特性。你的用户再也不用离开页面去升级他的播放器了。

要使用Express Install，你必须首先把expressinstall.swf文件上传到你的Web服务器上，然后使用useExpressInstall()方法来指定你的expressinstall.swf文件的路径。如果未指定任何路径，SWFObject会认为该文件和你的HTML页面在同一个文件夹下。

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

  so.useExpressInstall('expressinstall.swf');

  so.write("flashcontent");
</script>

如果你想要看看ExpressInstall是如何运转的，可以安装Flash Player 7(或者6.0.65)然后访问这个页面。

如果你希望自定义ExpressInstall的特性，那么expressinstall.swf的源代码亦包含在SWFObject中。

如果你的flash电影在一个弹出式窗口中，或者你希望在用户升级完ExpressInstall之后能够被重定向到一个不同的位置，你可以使用xiRedirectUrl属性来使用户重定向到登陆页面而不是flash电影所在的实际页面。

<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>

下载

SWFObject是在MIT许可下推出的。这（基本上）意味着你可以在没有任何限制的情况下使用该脚本。你可以在http://code.google.com/p/swfobject/下载最新版本的SWFObject。针对于本文，我们建议您到deconcept blog上面去下载1.5版本的SWFObject，

注：本文档仅适用1.5以下版本的SWFObject，这是因为目前由code.google.com主持更新的SWFObject的最新版本已经是2.1了，并且它并不向前兼容，内部api也发生了很大变化，以致改变了它的使用方法，详细内容请参见http://code.google.com/p/swfobject/wiki/documentation。

如果你正在帮助改进它，你可能会申请订阅SWFObject邮件列表，该邮件列表讨论了开发者或使用者可能遇到的问题，包括在使用SWFObject时所遇到的问题以及请求和导论新特性时所遇到的问题等。

需要帮助吗？试一试去SWFObject论坛寻求帮助吧。

为何SWFObject更胜一筹

几年来已经存在许多方法来检测flash版本和将flash电影嵌入到HTML文档中。这一节我们将要看一看每一种最流行的方法，同时指出每一种所存在的问题。

1)  Adobe提供的默认嵌入（Embed）方式

众所周知Adobe所提供的默认flash 嵌入（Embed）方式。它有一个带有一个Embed标记的Object标记组成。这是最流行的flash嵌入方法，同时也是当你从Flash集成环境（IDE）发布flash电影时的默认选择。它是嵌入flash电影的最兼容的方式也是在浏览器中范围最广的工作方式。下面的代码演示了默认的flash嵌入代码：

<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>  

当这种方式成为你嵌入flash电影的最普遍的方式的时候，它同时也存在这一下几个问题。

?   没有插件检测系统 – 在无插件检测的情况下，用户可能看见一个毁坏的或无内容。并且如果用户没有flash插件被安装的话，他们也会在IE上得到一个ActiveX Install对话框 ---一个由于目前无法控制的间谍软件(spyware)而被用户惧怕的对话框。这些插件安装系统中还没有一个是对用户是非常友好的同时也经常不给用户很好地解释他们到底要安装什么。

?   随着Eolas patent dispute的改变，用户在与flash进行交互之前也不得不首先点击flash内容去激活它。

?   它不是合法的HTML或XHTML标记 – 作为嵌入式标记，在任何的HTML或XHTML版本中都不存在这样的标记。然而自从许多浏览器以不同方式（或是完全不同的方式来处理，或是实现时产生了太多的bug）来处理object标记之后，embed标记作为一种技巧被加入进来。

2)  仅Object标记/flash satay

该方法在A List Apart Article于2002年推出之后很受欢迎。下面给出两个例子，一个是仅使用Object标记，另一个是适用flash satay：

‘Object tag only’

 <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时，一些屏幕阅读器（像JAWS）将会忽略你的flash内容。

?   随着Eolas patent dispute的改变，用户在与flash进行交互之前也不得不首先点击flash内容去激活它。

?   没有插件检测系统 – 和上面的问题一样 – 在没有插件检测的情况下，用户可能看到被破坏的内容或是无内容当flash播放器突然发现页面中有flash电影被嵌入时，那么它会不顾及任何flash版本的问题而尝试去播放flash电影。因此如果你安装了flash player 6并且遇到了flash 7版本的电影，那么当你的插件尝试去播放它时，很有可能会产生奇怪的行为。

?   某些Flash Satay的方法并不会使flash电影流向flash播放器 – 因此这种方法可能需要一个可以承载你的电影的swf电影。这会使从Flashvars参数传递变量很麻烦，同时维护起来需要比以前两倍多的swf文件的flash内容会让你很痛苦。

?   老版本的Safari浏览器会忽略param标记 – 直到在Tiger系统上升级到2.0版本或在Panther上的1.3版本（也可能是1.2.8版本）时，Safari才会完全忽略param标记。这意味着假如当你使用它们时你尽力去设定其他的选项的话，那么像Flashvars，Align和Salign等等，他们的值都将被Safari忽略。

3)  检测：索引页面上的一小段flash电影方法

这种方法包括把一个简单的flash电影放到网站的index页面上。然后这个flash电影便会检查flash播放器中的$version变量以及将用户重定向到网站内部显示flash内容的页面或者是flash升级页面。

此方法所存在的问题包括：

?   内部页面无插件检测 – 如果一个用户向另一个用户发送一个（本网站）内部的URL，那么新用户会在index页面绕过flash检测。

?   随着Eolas patent dispute的改变，用户在与flash进行交互之前也不得不首先点击flash内容去激活它。

?   它不是合法的(X)HTML – Align，这个需要被放置在你的HTML文档中的flash电影中的嵌入式标记将不会被验证。

?   会损害到你的页面在搜索引擎中的排名 – 既然现在你正在使用你的index页作为一个空的flash检测页面，那么当人们从Google或者是其他搜索引擎上搜索你的页面时，通常描述文本最终会显示为Detecting Flash Player或者根本什么都不显示。这是对于被用来促进你的公司或产品最基本的网站所有权的一种极大浪费。通常，开发者并不会将网站的其他内容包含到链接中（既然flash电影包含着这些链接），所以网站的其他部分也将不会被索引。

4)  The Adobe Flash Player Detection Kit

Adobe已经利用他们新的flash 8检测工具包（Flash 8 Detection Kit）出色地完成了这个工作 – 但并不是很出色。这个工具包包含了两种方法来检测flash插件：

1.   传统的“在index页面加入一小段flash电影” - （见上）

2.   Javascript – 是的，没错。Flash现在包含了一个JavaScript插件检测模板。不幸的是，它对于用户来说不是非常的友好，因为它混合了JavaScript、VBScript和所有的HTML于一个页面。作为以前的JavaScript检测和嵌入技术，它是有很多的不足之处的，也不会使Flash/HTML开发者的生活更舒适。并且，他也不会去验证(X)HTML的标记合法性（如果你很在乎这类事情的话）。

5)  使用未经加工的JavaScript来检测版本和嵌入flash电影

由于此方法因网站不同而异，因此我们很难去评论它。然而，大多数我见过的Flash检测方案通常都具有相同的缺陷：

?   不可靠的插件检测 – 检测常常只会在现有的flash播放器下正常工作，并且当新的flash插件版本发布后，它需要手工被更新。

?   需要向页面添加更多代码 – 这甚至会使更新和改变内容变得更加困难。对于网站设计人员或是那些与改变会添加flash的页面一起工作的人员来说，这个方法亦会令其更加困难。

?   过度复杂的解决方案 – 许多Flash嵌入脚本可能增长为大尺寸的文件或者是过度复杂。SWFObject被设计地尺寸更小、、更简单。

本文属作者翻译技术文档之习作，若要转载请注明出处及作者（Eric Liu）。谢谢！！

原文章链接地址：http://blog.deconcept.com/swfobject/