- 本章节将假设您已了解以下内容:
- alternative content
- Editors:
- 龙藏,Taobao,Inc
注意
一般来说,仅仅插入SWF不需要任何 JS代码。
当一个页面需要借助JS插入SWF,通常出于以下1个或多个情况:
- 消除某些浏览器存在的“点击激活(click-to-activate)”机制 。
- 当前页面和SWF间通讯。
- Flash player 版本向导及客户端版本控制。
- 动态增删改SWF及其涉及的元素属性及内容。
使用动态方式插入 SWF 时,代码会自行判断浏览器并以最恰当的方式进行插入。
代码差异性:指设定同样内容时,需要通过2种方式共同指定。
O-E静态方式
关于:
- 由 OBEJCT 和 EMBED 两个标签组合而成
- Adobe Flash Pro 等官方工具产出的页面中 NOSCRIPT 标签间包含的内容
- 通常附带名为 AC_RunActiveContent 的 javascript 文件
优点:
- 最强兼容性
- 遵从“优雅降级”(Gracefuldegradation)方式
- 官方代码,具有官方技术人员负责维护核心部分代码。如 AC_RunActiveContent.js
缺点:
- 最具差异性代码,不便于统一维护。
- 无法自定义替换内容Alternative content。即不满足可用性(usable)。
- 官方代码,具有官方技术人员负责维护核心部分代码。如 AC_RunActiveContent.js
- 代码冗余
其他:
- 默认官方代码主要依靠JS动态加载。可能会受限于页面控制权限。如第三方平台不允许用户使用。
- 仅静态嵌入,需要用户从自动生成代码的 NOSCRIPT 标签中剥离。
- AC_RunActiveContent是document.write()方式写入object或embed标签。
适用:
- 自己的站点,或不需要考虑太多问题的地方。因为官方都已做好,傻瓜式。
- 需要最强兼容但不需要自定义替换内容Alternative content的应用。
示例代码:
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("此页需要 AC_RunActiveContent.js");
} else {
AC_FL_RunContent(
'codebase', '/swflash.cab#version=9,0,0,0',
'width', '950',
'height', '203',
'src', 'SWF.swf',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'movie',
'bgcolor', '#ffffff',
'name', 'movie',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'SWF.swf',
'salign', ''
); //end AC code
}
</script>
<noscript>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="/swflash.cab#version=6,0,0,0"
width="950"
height="203"
id="movie"
>
<param name="movie" value="SWF.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="wmode" value="transparent" />
<embed src="SWF.swf"
width="950"
height="203"
allowfullscreen="true"
allowscriptaccess="always"
allownetworking="all"
wmode="transparent"
name="movie"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
</noscript>
O-O静态方式
关于:
- 由 2 个OBEJCT 标签组合而成
- SWObject 作者推荐的静态潜入方式
- 通常附带名为 AC_RunActiveContent 的 javascript 文件
优点:
- PC主流浏览器兼容。
- 较少代码差异性,利于维护。
- 可以自定义替换内容Alternative content。
缺点:
- 在某些浏览器下会多一次自定义替换内容Alternative content的请求。
- 在某些浏览器下多一次 SWF 请求,且不会从缓存取该内容。
- IE条件注释标签作可能在非IE浏览器下存在潜在问题
- 代码部分冗余
其他:
- 有在线生成器。
- SWFOject生成动态代码都是替换指定的 HTML 元素为一个 OBJECT 元素。
适用:
- 所有PC上。
- 当用户播放器可能没有安装或版本过低时,期望出现可替换内容的Alternative content。
- 可能需要通过期望出现可替换内容的 Alternative content 面向SEO的。
示例代码:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="950"
height="203" id="myFlashContent">
<param name="movie" value="SWF.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="SWF.swf"
width="950" height="203">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
L-O静态方式
关于:
- L-O即 Lazy Object。
- 仅有一个 OBJECT 标签。
- 是O-O方式的偷懒写法。
优点:
- PC上所有主流浏览器兼容。
- 代码差异性很小。
- 代码量较少。
- 可以自定义替换内容Alternative content。
缺点:
- 由于是O-O方式的偷懒法,故拥有O-O方式全部缺点。
- 在部分浏览器下,SWF将不能被缓存。
适用:
- 对页面请求数要求不高的页面。
- 想偷懒又想能自定义替换内容Alternative content的页面。
示例代码:
<object type="application/x-shockwave-flash" data="SWF.swf"
width="950" height="203" id="myFlashContent">
<param name="movie" value="SWF.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="wmode" value="transparent" />
<a href="http://www.adobe.com/go/getflashplayer">
<img src="get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</object>
L-E静态方式
关于:
- L-E即 Lazy Embed
- 仅有一个 EMBED 标签。
优点:
- 兼容当前所有主流浏览器。
- 代码量最少。
- 代码无差异性。
- 无多余请求。
缺点:
- 无法自定义替换内容Alternative content。
- 非XHTML1.0规范(HTML5才正式纳入规范)。
- 可能某些版本浏览器解析有问题。
适用:
- 希望使用最少代码的页面
- 不需要自定义替换内容Alternative content的页面
示例代码:
<embed src="SWF.swf" width="950" height="203"
allowfullscreen="true"
allowscriptaccess="always"
allownetworking="all"
wmode="transparent"
name="movie"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>