SWFObject 2.0官方文档
主要内容:
- 1 . 什么是SWFObject 2.0?
- 2 . 为什么你应该使用SWFObject 2.0?
- 3 . 为什么SWFObject 2.0使用JavaScript?
- 4 . 我们应该使用静态发表还是动态发表的方法?
- 5 . 怎样用SWFObject 2.0的静态发表方法来嵌入Flash内容
- 6 . 怎样用SWFObject 2.0的动态发表方法来嵌入Flash内容?
- 7 . 从SWFObject 1.5迁移到SWFObject 2.0的注意事项
- 8 . 从UFO迁移到SWFObject v2.0的注意事项
- 9 . SWFObject支持MIME类型application/xhtml+xml吗?
- 10 . 评论政策
1 . 什么是SWFObject 2.0?
SWFObject 2.0:
- 提供两种优化的嵌入Flash Player的方法:一种基于标签的方法和一种依赖于JavaScript的方法。
- 提供一套JavaScript API,目的是提供一套完整的工具来嵌入SWF文件和获得Flash Player的相关信息。[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_api_javascript_dev ]
- 只利用一个很小的JavaScript文件(size: 8.7Kb, GZIPed: 3.4Kb)。
- 是SWFObject 1.5[ http://blog.deconcept.com/swfobject/ ]和UFO [ http://www.bobbyvandersluis.com/ufo/ ]的继承者。
- 将最终替代Adobe Flash Player Detection Kit [ http://www.adobe.com/products/flashplayer/download/detection_kit/ ]。
- 准备整合所有已存在的Flash Player嵌入方法,并且为嵌入Adobe Flash Player内容提供一个新的标准。
- 是一个由Geoff Stearns、 Michael Williams和 Bobby van der Sluis创建的开源项目,前身是SWFFix [ http://code.google.com/p/swffix/ ]。
2 . 为什么你应该使用SWFObject 2.0?
SWFObject 2.0:
- 比任何其他的Flash Player嵌入方法更完善更灵活。
- 为每个人都提供了一种解决方案:无论你是一个HTML、Flash或者JavaScript开发者,你都能从中发现适合你的东西。
- 打破了使用浏览器专有标签的恶性循环,促进了web标准和替换内容(译者注:alternative content,指Flash内容无法正常显示时需要显示的内容,使用替换内容通常是因为Flash插件没有安装或者Flash插件版本过低)的使用。
- 采用分离式的(unobtrusive)JavaScript和最合理的JavaScript实践。
- 容易使用。
一篇A List Apart上的文章Flash Embedding Cage Match描述了SWFObject 2.0背后的所有原理。
3 . 为什么SWFObject 2.0使用JavaScript?
SWFObject 2.0主要使用JavaScript来解决一些仅依靠标签无法解决的问题;它:
- 通过探测Flash Player的版本,来决定显示Flash内容还是替换内容,避免了过时的Flash插件影响Flash内容的正常显示。
- 提供了恢复到替换内容的功能:当Flash内容因为过时的Flash Player而无法正常显示时,SWFObject通过DOM操作用替换内容代替Flash内容。(注意:如果Flash Player没有被安装,HTML object元素会自动被替换内容所替代。)
- 提供了一个选择来使用Adobe Express Install下载最新版本的Flash Player。
- 通过使用专有的embed元素的办法,解决了老版的Webkit引擎会忽略嵌套在object元素中的param元素的问题。(注意:这是唯一一个使用了专有HTML标签的地方,并且在今后的版本中会被逐步淘汰。)
- 提供了一个详尽的JavaScript API来完成一些常见的与Flash Player和Flash内容相关的操作。
4 . 我们应该使用静态发表还是动态发表的方法?
SWFObject提供了两种不同的方法来嵌入Flash内容:
- 静态发表方法用符合标准的标签来嵌入Flash内容和替换内容,并且用JavaScript来解决一些仅依靠标签无法解决的问题。
- 动态发表方法基于用标准标签插入替换内容,如果浏览器安装了最低版本需求的Flash插件并且拥有足够的JavaScript支持,SWFObject会用JavaScript将替换内容替换成Flash内容(与以前版本的SWFObject以及UFO很相似)。
静态发表方法的优势在于:
- 促进了对符合标准标签的创作。(译者注:不太理解,原文是:The actual authoring of standards compliant markup is promoted.)
- 插入Flash内容的机制不再依赖于JavaScript,所以你的Flash内容能有更多的受众。
- 如果你安装了Flash插件,但是JavaScript被禁用了或者浏览器并不支持JavaScript,你仍然能够看到你的Flash内容。
- Flash将能够在那些对JavaScript支持较弱的设备上运行,例如Sony PSP。
- 像RSS阅读器这样的自动化的工具能够读取Flash内容。
动态发表方法的优势在于:
- 它避免了通过点击激活的机制来激活Internet Explorer 6/7和Opera 9+中的Flash内容。值得注意的是微软正在逐步淘汰IE中的点击激活机制[ http://www.swffix.org/devblog/?p=19 ]。(译者注:Internet Explorer 6/7的点击激活机制已经在2008/4的更新中被移除)
- 它能很好的与基于脚本的应用整合。
5 . 怎样用SWFObject 2.0的静态发表方法来嵌入Flash内容?
5-1 . 第一步:用符合标准的标签同时嵌入Flash内容和替换内容
SWFObject的基本标签使用了嵌套object标签的方法(带有专用于Internet Explorer的条件注释)[ http://www.alistapart.com/articles/flashembedcagematch/ ]来保证仅通过标签实现最优化的跨浏览器支持,同时使其符合标准,并且支持替换内容[ http://www.swffix.org/testsuite/ ]:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
- <title>SWFObject v2.0 - step 1</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- </head>
- <body>
- <div>
- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
- <param name="movie" value="myContent.swf" />
- <!--[if !IE]>-->
- <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
- <!--<![endif]-->
- <p>Alternative content</p>
- <!--[if !IE]>-->
- </object>
- <!--<![endif]-->
- </object>
- </div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 - step 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
注意:嵌套object标签的方法要求两次定义object标签(外层的object为Internet Explorer定义,内层的object为其他浏览器定义),所以你也需要两次定义你的object属性(attributes)和嵌套的param元素。
必须的属性:
- classid(只需为外层object元素定义,值总是等于"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000")
- type(只需为内层object元素定义,值总是等于"application/x-shockwave-flash")
- data(只需为内层object元素定义,指定SWF文件的URL)
- width(内外层object都需要定义,指定这个SWF的宽)
- height(内外层object都需要定义,指定这个SWF的高)
必须的param元素:
- movie(只需为外层object元素定义,指定SWF文件的URL)
注意:我们建议不使用codebase属性来指向Adobe服务器上的Flash插件安装地址,因为它违背了只将访问限制在当前文档域的规范。我们推荐使用带有精巧提示信息的替换内容,这样用户将获得更好的Flash插件下载体验。
怎样使用HTML来配置你的Flash内容?
你可以为你的object元素添加下面这些常用的可选属性[ http://www.w3schools.com/tags/tag_object.asp ]:
- id
- name
- class
- align
你可以使用下面这些专用于Flash的可选param元素[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]:
- play
- loop
- menu
- quality
- scale
- salign
- wmode
- bgcolor
- base
- swliveconnect
- flashvars
- devicefont [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13331 ]
- allowscriptaccess [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16494 ]
- seamlesstabbing [ http://www.adobe.com/support/documentation/en/flashplayer/7/releasenotes.html ]
- allowfullscreen [ http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html ]
- allownetworking [ http://livedocs.adobe.com/flash/9.0/main/00001079.html ]
为什么你应该使用替换内容(alternative content)?
object元素允许你将替换内容嵌套在其中,如果Flash插件没有安装或者不被支持那么这些替换内容就会被显示出来。由于这些替换内容能被搜索引擎很好的识别,这使它成为一个创建对搜索引擎友好的网页内容的好工具。总之,当你想创建一个能够让不使用插件的用户[ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_03.html ]也可以访问的网页内容,创建一个对搜索引擎友好[ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_04.html ]的网页内容,或者告诉访问者他们能通过下载Flash插件获得更好的用户体验,你就应该使用替换内容。
5-2 . 第二步:在HTML的head标签中包括SWFObject的JavaScript类库
SWFObject的JavaScript类库由一个外部JavaScript文件(大小:10.7Kb,GZIPed:3.5Kb)组成。 SWFObject会在外部JavaScript文件被加载后立即被执行,并且对于那些支持DomLoad事件的浏览器,例如 IE、Firefox、Safari和Opera 9+,SWFObject将会在DOM被加载后完成所有的DOM操作,而如果浏览器不支持DomLoad事件,所有DOM操作将会在页面的load事件被触发后执行。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
- <title>SWFObject v2.0 - step 2</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <script type="text/javascript" src="swfobject.js"></script>
- </head>
- <body>
- <div>
- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
- <param name="movie" value="myContent.swf" />
- <!--[if !IE]>-->
- <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
- <!--<![endif]-->
- <p>Alternative content</p>
- <!--[if !IE]>-->
- </object>
- <!--<![endif]-->
- </object>
- </div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 - step 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
5-3 . 第三步:用SWFObject类库注册你的Flash内容并告诉SWFObject怎么样处理这些内容
首先为Flash内容的外层object标签添加一个独特的id属性,然后添加swfobject.registerObject方法: 第一个参数(String,必须的)指定object标签中使用的id。 第二个参数(String,必须的)指定你发布的Flash内容对应的Flash Player版本。它将激活Flash版本监测,用来决定是显示Flash内容还是通过一些DOM操作来显示替换内容。表示Flash版本的数字通常由四部分组成:major.minor.release.build,但是SWFObject只识别前3个数字,所以"WIN 9,0,18,0"(IE)或者"Shockwave Flash 9 r18"(其他浏览器)都会被翻译为"9.0.18"。
第三个参数(String,可选的)可以用来激活Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ],并指定express install SWF文件的URL。Express install将会在所需要的Flash Player版本不可用的时候,显示一个标准化的Flash插件下载对话框,用来替代你的Flash内容。一个默认的 expressInstall.swf文件被一起打包在了项目中。项目中也包含了expressInstall.fla和其他AS源文件(在SRC文件夹中),你可以用它们用性设计的作创建自定义的express install体验。需要注意的是,express install只会被触发一次(它第一次被调用时),只被Win或Mac平台上的Flash Player 6.0.65或更高的版本所支持,并且它要求SWF的最小尺寸为310*137 px。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
- <title>SWFObject v2.0 - step 3</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <script type="text/javascript" src="swfobject.js"></script>
- <script type="text/javascript">
- swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
- </script>
- </head>
- <body>
- <div>
- <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
- <param name="movie" value="myContent.swf" />
- <!--[if !IE]>-->
- <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
- <!--<![endif]-->
- <p>Alternative content</p>
- <!--[if !IE]>-->
- </object>
- <!--<![endif]-->
- </object>
- </div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
提示
- 使用SWFObject 2.0 HTML和JavaScript代码生成器(SWFObject 2.0 HTML and JavaScript generator)来帮助你创建代码:[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_generator ]。
- 重复第一步和第三步来在一个HTML页面里面嵌入多个SWF文件。
- 获得object元素引用最简单的方法是使用JavaScript API:swfobject.getObjectById(objectIdStr) [ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_api_javascript_dev ]
6 . 怎样用SWFObject 2.0的动态发表方法来嵌入Flash内容?
6-1 . 第一步:用符合标准的标签创建替换内容
SWFObject的动态嵌入方法遵循渐进增强(progressive enhancement)[ http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html ]的原则,当浏览器对JavaScript和Flash插件有足够支持的时候,SWFObject会用Flash内容替换HTML内容。首先定义你的替换内容,并且为它添加一个id属性:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
- <title>SWFObject v2.0 dynamic embed - step 1</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- </head>
- <body>
- <div id="myContent">
- <p>Alternative content</p>
- </div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 dynamic embed - step 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>
6-2 . 第二步:在HTML页面的head标签中包括SWFObject JavaScript类库
SWFObject的JavaScript类库由一个外部JavaScript文件(大小:10.7Kb,GZIPed:3.5Kb)组成。 SWFObject会在外部JavaScript文件被加载后立即被执行,并且对于那些支持DomLoad事件的浏览器,例如 IE、Firefox、Safari和Opera 9+,SWFObject将会在DOM被加载后完成所有的DOM操作,而如果浏览器不支持DomLoad事件,所有DOM操作将会在页面的onload事件被触发后执行。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
- <title>SWFObject v2.0 dynamic embed - step 2</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <script type="text/javascript" src="swfobject.js"></script>
- </head>
- <body>
- <div id="myContent">
- <p>Alternative content</p>
- </div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 dynamic embed - step 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>
6-3 . 第三步:用JavaScript嵌入你的SWF
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)有5个必须的参数和4个可选的参数:
- swfUrl(String,必须的)指定SWF的URL。
- id(String,必须的)指定将会被Flash内容替换的HTML元素(包含你的替换内容)的id。
- width(String,必须的)指定SWF的宽。
- height(String,必须的)指定SWF的高。
- version(String,必须的)指定你发布的SWF对应的Flash Player版本(格式为:major.minor.release)。
- expressInstallSwfurl(String,可选的)指定express install SWF的URL并激活Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]。
- flashvars(String,可选的)用name:value对指定你的flashvars。
- params(String,可选的)用name:value对指定你的嵌套object元素的params。
- attributes(String,可选的)用name:value对指定object的属性。
注意:在不破坏参数顺序的情况下,你可以忽略可选参数。如果你不想使用一个可选参数,但是会使用后面的一个可选参数,你可以简单的传入false作为参数的值。对flashvars、 params和 attributes这些JavaScript对象来说,你也可以相应的传入一个空对象{}。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
- <title>SWFObject v2.0 dynamic embed - step 3</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <script type="text/javascript" src="swfobject.js"></script>
- <script type="text/javascript">
- swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
- </script>
- </head>
- <body>
- <div id="myContent">
- <p>Alternative content</p>
- </div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 dynamic embed - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>
怎样配置你的Flash内容?
你可以为你的object元素添加下面这些常用的可选属性(attributes)[ http://www.w3schools.com/tags/tag_object.asp ]:
- id
- name
- styleclass(不使用class,因为class也是ECMA4的保留关键字)s
- align
你可以使用下面这些专用于Flash的可选param元素[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]:
- play
- loop
- menu
- quality
- scale
- salign
- wmode
- bgcolor
- base
- swliveconnect
- flashvars
- devicefont [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13331 ]
- allowscriptaccess [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16494 ]
- seamlesstabbing [ http://www.adobe.com/support/documentation/en/flashplayer/7/releasenotes.html ]
- allowfullscreen [ http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html ]
- allownetworking [ http://livedocs.adobe.com/flash/9.0/main/00001079.html ]
怎样用JavaScript对象来定义你的flashvars、params和attributes?
你最好用对象的字面量(Object literal notation)来定义JavaScrpt对象,例如这样:
- <script type="text/javascript">
- var flashvars = {};
- var params = {};
- var attributes = {};
- swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
- </script>
你可以在定义对象的时候添加你的name:value对(注意:请确保不要再对象中的最后一个name:value对后面加上逗号):
- <script type="text/javascript">
- var flashvars = {
- name1: "hello",
- name2: "world",
- name3: "foobar"
- };
- var params = {
- menu: "false"
- };
- var attributes = {
- id: "myDynamicContent",
- name: "myDynamicContent"
- };
- swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
- </script>
或者在对象创建之后用点号添加属性(properties)和值:
- <script type="text/javascript">
- var flashvars = {};
- flashvars.name1 = "hello";
- flashvars.name2 = "world";
- flashvars.name3 = "foobar";
- var params = {};
- params.menu = "false";
- var attributes = {};
- attributes.id = "myDynamicContent";
- attributes.name = "myDynamicContent";
- swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
- </script>
上面的代码也可以这样写(为那些喜欢单行代码的顽固脚本程序员准备的不易读的简写版本):
- <script type="text/javascript">
- swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});
- </script>
如果你不想使用一个参数,你可以将它定义为false或者一个空对象:
- <script type="text/javascript">
- var flashvars = false;
- var params = {};
- var attributes = {
- id: "myDynamicContent",
- name: "myDynamicContent"
- };
- swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
- </script>
flashvars对象是一个为了增加易用性而设计的作为快捷方式的参数,所以你可以先忽略它,然后在params对象中指定你的flashvars:
- <script type="text/javascript">
- var flashvars = false;
- var params = {
- menu: "false",
- flashvars: "name1=hello&name2=world&name3=foobar"
- };
- var attributes = {
- id: "myDynamicContent",
- name: "myDynamicContent"
- };
- swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
- </script>
提示
- 使用SWFObject 2.0 HTML和JavaScript代码生成器(SWFObject 2.0 HTML and JavaScript generator)来帮助你创建代码:[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_generator ]。
- 重复第一步和第三步来在一个HTML页面里面嵌入多个SWF文件。
7 . 从SWFObject 1.5迁移到SWFObject 2.0的注意事项
- SWFObject 2.0并不向后兼容SWFObject 1.5。
- 现在更倾向于在HTML页面的head标签中插入所有的脚本文件。
- 现在类库使用的是小写:swfobject,而不是SWFObject。
- 现在只能通过类库(的类)来访问方法(译者注:即静态方法),而不是像从SWFObject v1.5中那样通过SWFObject的实例来访问。
- API跟以前完全不同了,而且更详尽:[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_api_javascript_dev ]。
- 如果浏览器对JavaScript和Flash有足够的支持,SWFObject 2.0会将整个替换内容,包括被引用的HTML容器元素,替换为Flash内容,而不是像SWFObject 1.5那样,只把被引用容器里面的内容替换为Flash内容。你现在可以这样转移你的CSS规则:为你的Flash内容定义与替换内容的容器元素相同的 id(前者将替换后者,所以你的id不会重复)。
8 . 从UFO迁移到SWFObject v2.0的注意事项
- 如果浏览器对JavaScript和Flash有足够的支持,SWFObject 2.0会将整个替换内容,包括被引用的HTML容器元素,替换为Flash内容,而不是像UFO那样,只把被引用容器里面的内容替换为Flash内容。你现在可以这样转移你的CSS规则:为你的Flash内容定义与替换内容的容器元素相同的id(前者将替换后者,所以你的id不会重复)。
- UFO的setcontainercss特性没有被合并到SWFObject 2.0中,但是使用SWFObject 2.0的API可以很容易的实现相同的功能,请参考:[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_api_javascript_dev ]中的swfobject.createCSS(selStr, declStr)。
9 . SWFObject支持MIME类型application/xhtml+xml吗?
出于设计上的考虑,SWFObject不支持MIME类型。
我们不提供支持的理由有很多:
- 只有很少一部分(并不重要)web开发者使用它。
- 我们不确定那是否今后的发展方向。Internet Explorer并不支持它,而其他主流的浏览器将它们的目标定在了一种新的HTML解析标准(以及HTML 5),而这将偏离目前W3C所提倡的将HTML解析为XML。
- 考虑到节省文件大小,以及时间、精力的限制(主要在测试和解决疑难问题方面),我们不提供对它的支持。
10 . 评论政策
我们会尽可能保持这个页面的苗条和简洁,因为它会被很多人使用。出于这样的目的,我们会定期检查所有的评论,并移除所有过时的或者与本文档无关的评论。 如果你对SWFObject 2.0有任何问题、意见或者在使用时遇到困难:
- 请确定你已经阅读了我们的FAQ [ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_faq_web_authors ]。
- 使用SWFObject 2.0讨论组[ http://groups.google.com/group/swfobject ]。 如果你发现任何bug或者有更多功能上的需求,你可以在SWFObject 2.0问题提交页面[ http://code.google.com/p/swfobject/issues/list ]填写一份问题报告。