用SWFObject的动态方法来嵌入Flash内容

转:http://gray.topdrupal.com/SWFObject-dynamic

 

第一步:用符合标准的标签创建替换内容

SWFObject的动态嵌入方法遵循渐进增强(progressive enhancement)的原则,当浏览器对JavaScript和Flash插件有足够支持的时候,SWFObject会用Flash内容替换HTML内容。首先定义你的替换内容,并且为它添加一个id属性:

代码如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3.   <head>
  4.     <title>SWFObject v2.0 dynamic embed - step 1 </title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.   </head>
  7.   <body>
  8.     <div id="myContent">
  9.       <p>Alternative content </p>
  10.     </div>
  11.   </body>
  12. </html>

第二步:在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事件被触发后执行。

代码如下:
  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  2.   <head>
  3.     <title>SWFObject v2.0 dynamic embed - step 2 </title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.     <script type="text/javascript" src="swfobject.js"></script>
  6.   </head>
  7.   <body>
  8.     <div id="myContent">
  9.       <p>Alternative content </p>
  10.     </div>
  11.   </body>
  12. </html>

第三步:用JavaScript嵌入你的SWF

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)有5个必须的参数和4个可选的参数:

  1. swfUrl(String,必须的)指定SWF的URL。
  2. id(String,必须的)指定将会被Flash内容替换的HTML元素(包含你的替换内容)的id。
  3. width(String,必须的)指定SWF的宽。
  4. height(String,必须的)指定SWF的高。
  5. version(String,必须的)指定你发布的SWF对应的Flash Player版本(格式为:major.minor.release)。
  6. expressInstallSwfurl(String,可选的)指定express install SWF的URL并激活Adobe express install 。
  7. flashvars(String,可选的)用name:value对指定你的flashvars。
  8. params(String,可选的)用name:value对指定你的嵌套object元素的params。
  9. attributes(String,可选的)用name:value对指定object的属性。

注意:在不破坏参数顺序的情况下,你可以忽略可选参数。如果你不想使用一个可选参数,但是会使用后面的一个可选参数,你可以简单的传入false作为参数的值。对flashvars、 params和 attributes这些JavaScript对象来说,你也可以相应的传入一个空对象{}。

代码如下:
  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  2.   <head>
  3.     <title>SWFObject v2.0 dynamic embed - step 3 </title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.     <script type="text/javascript" src="swfobject.js"></script>
  6.     <script type="text/javascript">
  7.     swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
  8.     </script>
  9.   </head>
  10.   <body>
  11.     <div id="myContent">
  12.       <p>Alternative content </p>
  13.     </div>
  14.   </body>
  15. </html>

怎样配置你的Flash内容?

你可以为你的object元素添加下面这些常用的可选属性(attributes):

  • id
  • name
  • styleclass(不使用class,因为class也是ECMA4的保留关键字)s
  • align

你可以使用下面这些专用于Flash的可选param元素

  • play
  • loop
  • menu
  • quality
  • scale
  • salign
  • wmode
  • bgcolor
  • base
  • swliveconnect
  • flashvars
  • devicefont
  • allowscriptaccess
  • seamlesstabbing
  • allowfullscreen
  • allownetworking

怎样用JavaScript对象来定义你的flashvars、params和attributes?

你最好用对象的字面量(Object literal notation)来定义JavaScrpt对象,例如这样:

代码如下:
  1. <script type = "text/javascript" >
  2. var flashvars = { } ;
  3. var params = { } ;
  4. var attributes = { } ;
  5. swfobject. embedSWF ( "myContent.swf" , "myContent" , "300" , "120" , "9.0.0" , "expressInstall.swf" , flashvars , params , attributes ) ;
  6. </script >
你可以在定义对象的时候添加你的name:value对(注意:请确保不要再对象中的最后一个name:value对后面加上逗号):
  1. <script type = "text/javascript" >
  2. var flashvars = {
  3.   name1 : "hello" ,
  4.   name2 : "world" ,
  5.   name3 : "foobar"
  6. } ;
  7. var params = {
  8.   menu : "false"
  9. } ;
  10. var attributes = {
  11.   id : "myDynamicContent" ,
  12.   name : "myDynamicContent"
  13. } ;
  14. swfobject. embedSWF ( "myContent.swf" , "myContent" , "300" , "120" , "9.0.0" , "expressInstall.swf" , flashvars , params , attributes ) ;
  15. </script >
或者在对象创建之后用点号添加属性(properties)和值:
  1. <script type = "text/javascript" >
  2. var flashvars = { } ;
  3. flashvars. name1 = "hello" ;
  4. flashvars. name2 = "world" ;
  5. flashvars. name3 = "foobar" ;
  6. var params = { } ;
  7. params. menu = "false" ;
  8. var attributes = { } ;
  9. attributes. id = "myDynamicContent" ;
  10. attributes. name = "myDynamicContent" ;
  11. swfobject. embedSWF ( "myContent.swf" , "myContent" , "300" , "120" , "9.0.0" , "expressInstall.swf" , flashvars , params , attributes ) ;
  12. </script >
上面的代码也可以这样写(为那些喜欢单行代码的顽固脚本程序员准备的不易读的简写版本):
  1. <script type = "text/javascript" >
  2. swfobject. embedSWF ( "myContent.swf" , "myContent" , "300" , "120" , "9.0.0" , "expressInstall.swf" , {name1 : "hello" ,name2 : "world" ,name3 : "foobar" } , {menu : "false" } , {id : "myDynamicContent" , name : "myDynamicContent" } ) ;
  3. </script >
如果你不想使用一个参数,你可以将它定义为false或者一个空对象:
  1. <script type = "text/javascript" >
  2. var flashvars = false ;
  3. var params = { } ;
  4. var attributes = {
  5.   id : "myDynamicContent" ,
  6.   name : "myDynamicContent"
  7. } ;
  8. swfobject. embedSWF ( "myContent.swf" , "myContent" , "300" , "120" , "9.0.0" , "expressInstall.swf" , flashvars , params , attributes ) ;
  9. </script >
flashvars对象是一个为了增加易用性而设计的作为快捷方式的参数,所以你可以先忽略它,然后在params对象中指定你的flashvars:
  1. <script type = "text/javascript" >
  2. var flashvars = false ;
  3. var params = {
  4.   menu : "false" ,
  5.   flashvars : "name1=hello&name2=world&name3=foobar"
  6. } ;
  7. var attributes = {
  8.   id : "myDynamicContent" ,
  9.   name : "myDynamicContent"
  10. } ;
  11. swfobject. embedSWF ( "myContent.swf" , "myContent" , "300" , "120" , "9.0.0" , "expressInstall.swf" , flashvars , params , attributes ) ;
  12. </script >

提示

  • 使用SWFObject 2.0 HTML和JavaScript代码生成器(SWFObject 2.0 HTML and JavaScript generator)来帮助你创建代码:。
  • 重复第一步和第三步来在一个HTML页面里面嵌入多个SWF文件。

参考:

下载SWFObject 2.x,目前最新版本为2.1,swfobject_2_1.zip是JavaScript主体程序,另外两个是生成代码的工具。
SWFObject 2 代码生成器 v1.2 部分汉化版,可以用这个工具在线生成HTML代码。
SWFObject 2.x 简介
用SWFObject的静态方法来嵌入Flash内容

 
 

 

你可能感兴趣的:(swfobject)