zoukankan      html  css  js  c++  java
  • 好的开源工具 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可以让你轻易的实现选择性嵌入等等。

  • 相关阅读:
    Vue单页面应用
    MVVM模式理解
    Ajax原生四大步骤
    Vue 全家桶介绍
    原生js的dom操作
    vs2015+opencv3.3.1+ maxflow-v3.01 c++实现Yuri Boykov 的Interactive Graph Cuts
    c++迭代递归实现汉诺塔(5种迭代方法满足你)
    opencv3.3.1+vs2015+c++实现直接在图像上画掩码,保存掩码图片
    声明函数指针、回调函数、函数对象------c++程序设计基础、编程抽象与算法策略
    C++/C语言的标准库函数与运算符的区别new/delete malloc/free
  • 原文地址:https://www.cnblogs.com/forcertain/p/2115271.html
Copyright © 2011-2022 走看看