转载自for certain:好的开源工具 swfobject--让我们容易的在网页嵌入flash,并且兼容性强和利于seo

view sourceprint?
01 var flashvars = {};

02 flashvars.name1 = "hello";

03 flashvars.name2 = "world";

04 flashvars.name3 = "foobar";

05

06 var params = {};

07 params.menu = "false";

08

09 var attributes = {};

10 attributes.id = "myDynamicContent";

11 attributes.name = "myDynamicContent";

swfobject是什么?

它是一个开源的javascript工具类,我们可以在google code上很容易的找到它:http://code.google.com/p/swfobject/。它提供了一个统一的方式让我们很轻松的在网页中嵌入flash内容,而不用去考虑任何平台和浏览器的特殊标记,及它们对flash的支持能力。无论你是页面制作、flash制作或者js的开发,你都可以找到一个适合的方式嵌入flash内容。其次,它还提供了一些API,让你能够去检测当前浏览器对flash支持的一些信息,让你可以轻松的完成你的逻辑。据官方说文件只有10kb,gzip之后只有3.9K。

如何用swfobject在页面中嵌入flash?

它提供了两种方法:静态嵌入方法和动态的嵌入。

静态嵌入:它利用html标记嵌入flash内容和替代内容,然后选用js实现标记所不能完成的检测、兼容和动态替换等功能。

view sourceprint?
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 - step 3</title>

5 <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.115", "expressInstall.swf"); </script>

view sourceprint
?
1 </head>

2 <body>

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

view sourceprint
?
1 </div>

2 </body>

3 </html>

上段代码是直接从官方文档处引来的,总的来说这种方式的嵌入分为三步:

1,利用html嵌入flash和替代内容,其中紫色代码处就是。我们可以看到最外围的object标签,这是针对IE的,我们通过param标记来指定它的一些参数,内容的object标签是对其它浏览器的,这里也要指定flash的地址,并且还有一个<P>标记的替代内容,这是该js工具的一个亮点,首先,它可以在如果浏览器不支持flash的情况下,显示这里的内容,保证你的页面在任何情况下都是完整的,并且是可控制的,第二,我们都知道搜索引擎是不能索引flash内的内容的,我们在替代内容加入你想要索引的内容,这样更利于SEO。

2,引入该js文件,蓝色代码处。

3,红色代码处,告诉js你要让它帮你完成兼容等工作的标记,第一个参数是标记object的ID,第二个是你要求的flash的版本号,是按major.minor.release.build这样的形式,js只管前三个,如果是只要是第9个大版本就行,用9而不是9.0.0。第三个参数可选,它显示的是如果版本不支持,去下载特定版本时显示的flash内容,该方案里包含了一个flash,当然你也可以自定义。其实,还有一个可选的参数,传一个回调函数,不管是载入完成时调用的,无论成功或失败都会调用的。

你可以重复1、3处的代码来嵌入更多的flash内容。

动态嵌入:这种只需要你加入替代的内容,然后js会帮你完成flash的嵌入(当前浏览器支持并没有禁用js,flash也处于可用状态的情况下)。

view sourceprint?
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 dynamic embed - step 3</title>

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

view sourceprint?
1
</head>

2
<body>

<div id="myContent"> <p>Alternative content</p> </div>

view sourceprint?
1
</body>

2
</html>

第一步,紫色代码处,只是替代内容。

第二步,引入js,蓝色代码处。

第三步,调用。第一个参数,嵌入的flash内容,第二个参数替代内容的ID,第三、四个flash的宽、高,第五个要求的版本号,第6个可选,去下载时的显示的动画,第7个可选要加入实际的flash的flashvars参数,第8个可选,要加入的params参数,第9个可选要加入的object的属性参数,第10个可选,回调函数。

其中7、8、9参数可以

 

这样的形式出现,当然你也可以传个{}过去,更详细的介绍还是去google code吧。

这里只是描述了嵌入flash的简单的方法,但是swfobject的功能绝不仅如此,它提供的其它api可以让你轻易的实现选择性嵌入等等。

posted @ 2011-07-24 23:24  同城中人  阅读(264)  评论(0编辑  收藏  举报