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

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实现标记所不能完成的检测、兼容和动态替换等功能。

<!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 - 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.115", "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>

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

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也处于可用状态的情况下)。

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

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

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

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

其中7、8、9参数可以

var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";

var params = {};
params.menu = "false";

var attributes = {};
attributes.id = "myDynamicContent";
attributes.name = "myDynamicContent";

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

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

原文地址:https://www.cnblogs.com/forcertain/p/2115271.html