技术的世界只说技术就好了..

分类目录

近期文章

标签

近期评论

功能

2018年八月
« 11月    
 12345
6789101112
13141516171819
20212223242526
2728293031  

javascript图片预加载

网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张 图片就需要重新下载一下整个页面。不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到 其他图片。

知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来。因此,实现图片预加载就成为图片浏览器的核心功能了。

做过图片翻转效果的朋友其实都知道,要让图片轮换的时候不出现等待,最好是先让图片下载到本地,让浏览器缓存起来。这时,一般都会用到js里边的Image对象。一般的手段无非这样:
function preLoadImg(url) {
var img = new Image();
img.src = url;
}
通过调用preLoadImg函数,传入图片的url,就能使图片预先下载下来了。实际上,这里用到的预下载功能也和这基本一致。图片预下载下来后,通过 img的width和height属性,就能知道图片的宽和高了。但是需要考虑到,在做图片浏览器功能时,图片都是实时显示的。比如你点了显示的按钮,这 个时候才会调用上边类似的代码来加载图片。因此,如果你直接用img.width的时候,图片还没有完全下载下来。因此,需要用一些异步的方法,等到图片 下载完毕的时候才会再对img的width和height进行调用。

实现这样的异步方法实际上不难,图片的下载完毕事件也很简单,就是简单的onload事件。因此,我们可以写出下面的代码:
function loadImage(url, callback) {
var img = new Image();
img.src = url;

img.onload = function(){ //图片下载完毕时异步调用callback函数。
    callback.call(img);   // 将callback函数this指针切换为img。
};
}

好了,再来写一个测试用例。
function imgLoaded(){
alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

在firefox中测试一下,发现不错,果然和预想的效果一样,在图片下载后,就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。

不过,做到这一步,先别高兴太早——还需要考虑一下浏览器的兼容性,于是,赶紧到ie里边测试一下。没错,同样弹出了图片的宽度。但是,再点击load的时候,情况就不一样了,什么反应都没有了。刷新一下,也同样如此。

经过对多个浏览器版本的测试,发现ie6、opera都会这样,而firefox和safari则表现正常。其实,原因也挺简单的,就是因为浏览器 的缓存了。当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于 firefox和safari,它们视图使这两种加载方式对用户透明,同样会引起图片的onload事件,而ie和opera则忽略了这种同一性,不会引 起图片的onload事件,因此上边的代码在它们里边不能得以实现效果。

怎么办呢?最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候,因为不需要等待,这个状态值就直接是表明已经下载了,而从http请求加载时,因为需要等待下载,这个值显示为未完成。这样的话,就可以搞定了。

经过一些分析,终于发现一个为各个浏览器所兼容的Image的属性——complete。所以,在图片onload事件之前先对这个值做一下判断即可。最后,代码变成如下的样子:
function loadImage(url, callback) {
    var img = new Image(); //创建一个Image对象,实现图片的预下载
    img.src = url;
  
    if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
        callback.call(img);
        return; // 直接返回,不用再处理onload事件
    }

    img.onload = function () { //图片下载完毕时异步调用callback函数。
        callback.call(img);//将回调函数的this替换为Image对象
    };
};
经过这么一番折腾,总算是让各个浏览器都能满足我们的目标了。虽然代码很简单,但是却把图片浏览器中最核心的问题解决掉了,接下来你所要做的,仅仅是图片如何呈现的问题了。

js UrlEncode和UrlDecode函数

XML/HTML代码
        

  1. <script language="javascript">    
  2.     

  3. function UrlEncode(str)   
  4.     

  5. {    
  6.     

  7.     var ret="";    
  8.     

  9.     var strSpecial="!\"#$%&()*+,/:;<=>?[]^`{|}~%"; var tt="";   
  10.     

  11.     for(var i=0;i<str.length;i++)   
  12.     

  13.     {    
  14.     

  15.         var chr = str.charAt(i);    
  16.     

  17.         var c=str2asc(chr);    
  18.     

  19.         tt += chr+":"+c+"n";    
  20.     

  21.         if(parseInt("0x"+c) > 0x7f)   
  22.     

  23.         {    
  24.     

  25.             ret+="%"+c.slice(0,2)+"%"+c.slice(-2);    
  26.     

  27.         }   
  28.     

  29.         else   
  30.     

  31.         {    
  32.     

  33.             if(chr==" ")    
  34.     

  35.                 ret+="+";    
  36.     

  37.             else if(strSpecial.indexOf(chr)!=-1)    
  38.     

  39.                 ret+="%"+c.toString(16);    
  40.     

  41.             else    
  42.     

  43.                 ret+=chr;    
  44.     

  45.         }    
  46.     

  47.     }    
  48.     

  49.     return ret;    
  50.     

  51. }    
  52.     

  53.   
  54.     

  55. function UrlDecode(str){    
  56.     

  57.     var ret="";    
  58.     

  59.     for(var i=0;i<str.length;i++)   
  60.     

  61.     {    
  62.     

  63.         var chr = str.charAt(i);    
  64.     

  65.         if(chr == "+")   
  66.     

  67.         {    
  68.     

  69.             ret+=" ";    
  70.     

  71.         }   
  72.     

  73.         else if(chr=="%")   
  74.     

  75.         {    
  76.     

  77.             var asc = str.substring(i+1,i+3);    
  78.     

  79.             if(parseInt("0x"+asc)>0x7f)   
  80.     

  81.             {    
  82.     

  83.                 ret+=asc2str(parseInt("0x"+asc+str.substring(i+4,i+6)));    
  84.     

  85.                 i+=5;    
  86.     

  87.             }   
  88.     

  89.             else   
  90.     

  91.             {    
  92.     

  93.                 ret+=asc2str(parseInt("0x"+asc));    
  94.     

  95.                 i+=2;    
  96.     

  97.             }    
  98.     

  99.         }   
  100.     

  101.         else   
  102.     

  103.         {    
  104.     

  105.             ret+= chr;    
  106.     

  107.         }    
  108.     

  109.     }    
  110.     

  111.     return ret;    
  112.     

  113. }    
  114.     

  115. </script>  

 

解决IE6不支持PNG最好方案 — DD_belatedPNG

我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.
然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-positionbackground-repeat.

而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-positionbackground-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.

本博 上部的LOGO背景PNG 就是应用的本方法

[separator]

看Demo

原理

这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

使用方法

1.在这里下载DD_belatedPNG.js文件.
2.在网页中引用,如下:

 
        

  1. <!--[if IE 6]>
  2.     

  3. <script src="DD_belatedPNG.js"></script>
  4.     

  5. <script type="text/javascript">
  6.     

  7. <!--
  8.     

  9. DD_belatedPNG.fix('#logo_bg');
  10.     

  11. /* 将 #logo_bg 改成你应用了透明PNG的CSS选择器*/
  12.     

  13. // -->
  14.     

  15. </script>
  16.     

  17. <!--[endif]-->
  18.     

  19. <!--demo-->
  20.     

  21. <style type="text/css">
  22.     

  23. div#logo_bg{ background:url("bigbg.png") no-repeat; /*...MORECODE*/}
  24.     

  25. <style>
  26.     

  27. <div id="logo_bg"></div>
  28.     

  29. ...
  30.     

  31. <!--demo.end-->
 

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.

其他方案

在这里还是提供其他方案供大家参考.尽管我觉得DD_belatedPNG最好

一个纯JavaScript的:
http://www.cssrain.cn/demo/ie6png/Supersleight/demo.html

jQuery pngfix 插件实现的:
http://www.cssrain.cn/demo/ie6png/jQueryPNGfix/demo.html

说个关于站点兼容宽度的CSS技巧

由于网站用户分辨率的不同  所以为了更好的用户体验 网站的宽度自动变更就显得特别重要了

 

这里我说个 比较好的方法

CSS样式:

div#wrapper{margin:0 auto;min-width:960px;max-width:1200px;padding:0 20px;width:expression(document.body.clientWidth > 1024? "1200px": "960px" );}

 

如果你的框架外面的 DIV的 ID 为 wrapper 那么定义以上的CSS样式

就会根据 分辨率自动的变更网站的现实分辨率..   有的网友会问 这个不是使用了滤镜么..会影响网站打开速度

关于这一点 可以明确的告诉大家 几乎没影响..

漂亮便捷的BSINA所见即所得编辑器发布~

原发布地址http://127.0.0.1/wordpress/read.php/28.htm

PS: 有问题请到这里留言。。。

感觉这个编辑器有很大的修改空间 而且我会陆续增加新的元素。。

这几天由于忙着给别人给朋友写PHP IDC程序 有什么问题可能不能及时回复 敬请见谅!谢谢。

BSINA所见即所得编辑器修

至SINA BLOG编辑器支持[ separator][ newpage] 标签,

并且有出色的图片排版功能~这个大家自己安装完可以自己去体验一下.很棒的

当使用插入按钮时只要选中AUTOPICSIZE并插入到BSINA编辑器的图片就会根据后面2项W和H的取值插入已经调节好大小的图片到编辑器中!W和H分别时图片的上限宽度和高度,并且已经整合highslide特效~~[separator]

介绍图请见图2

编辑器下载:

[file][attach]48[/attach][/file]

1.安装方法:

下载附件,覆盖到您的BOBLOG 根目录 ~

找到 editor\custom\editordef.php

打开文件并根据注释修改设定值 以下是需要修改的设定值

[quote]$editorautosave=1;
//自动载入
$AutoPicSize= 1;
//插入图片大小自动调整开关
$AutoPicSize_width = 300;
//插入图片大小自动调整 宽度上限
$AutoPicSize_height = 400;
//插入图片大小自动调整 高度上限

[/quote]

找到 admin\cp_upload.php 打开进行修改

找到代码

[quote]if (!$useeditor) $useeditor=$mbcon['editortype'];[/quote]

在其下部插入

[quote]

$file = 'editor/'.$useeditor.'/editordef.php';
if (file_exists($file)){
include $file;
}
[/quote]

找到

[quote]

global $csslocation, $mbcon, $lna, $langback, $useeditor;

[/quote]
修改为

[quote]

global $csslocation, $mbcon, $lna, $langback, $useeditor, $file, $edituploader;

[/quote]

找到

[quote]

<script type='text/javascript' src="editor/{$useeditor}/uploader.js"></script>

[/quote]
在其下部插入

[quote]

{$edituploader}

[/quote]

如果你没有改过admin\cp_upload.php 可以直接下载下面的附件进行覆盖
[file][attach]22[/attach][/file]
2.兼容其他编辑器:

由于BSINA 编辑器是将原有textarea 隐藏 并用框架的形式读取原textarea 内的内容到框架呢。。所以问题就产生了。。 从其他编辑器比如 tinymce 插入的图片 到BSINA 编辑器 这就显示不正常了。。以下是我出的解决方法

tinymce编辑器为例

找到 editor\tinymce\uploader.js

打开找到

[quote]

var realpath="attachment/";

[/quote]

在其下部插入

[quote]

var siteurl=http://127.0.0.1/wordpress/;

[/quote]

注: 这个请根据自己的博客地址进行修改

找到

[quote]antileechurl="attachment.php?fid="+antileechurl; [/quote]注意共2处

替换为

[quote]antileechurl=siteurl+"attachment.php?fid="+antileechurl;[/quote]

找到 editor\tinymce\editordef.php
打开找到
[quote] force_p_newlines : false,
[/quote]

在其下部插入
[quote]
relative_urls : false,
remove_script_host : false,
[/quote]

以下附件是修改过的文件

[file][attach]24[/attach][/file]


SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块

原文:SWFObject: Javascript Flash Player detection and embed script
翻译:Awflasher.com
汉化地址:http://www.awflasher.com/flash/articles/swfobj.htm - 更新到SWFObject 1.5官方文档(Updated to 1.5 @ 070318)

SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源(*.swf文件)的独立、敏捷的JavaScript模块。该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外,它能够避免您的HTML、XHTML中出现object、embed等非标准标签,从而符合更加标准。
(即:通过text/html应答页面, 而非application/xhtml+xml)

[separator]

请注意: 由于法律原因,FlashObject已经更名为SWFObject,详见这里

内容导读

新功能

详细的更新记录可以在SWFObject 1.5 blog post这里找到。

实现原理

[对于急切需要下载的用户点击这里直接观看JS代码]

SWFObject的使用是非常简单的,只需要包含 swfobject.js这个js文件,然后在DOM中插入一些简单的JS代码,就能嵌入Flash媒体资源了。 下面是一个最简单的范例:

<script type="text/javascript" src="swfobject.js"></script>    <div id="flashcontent">  This text is replaced by the Flash movie.</div><script type="text/javascript">   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");   so.write("flashcontent");</script>

让我们看看这些代码是如何工作的

<div id="flashcontent">[...]</div>

首先,我们要为SWF资源预留一个HTML结点。这个HTML结点内的所有内容都会在客户端被Flash资源替换,当客户端没有安装Flash播放器的时候,这些内容会显示出来。这一特色在SEO以及对用户体验方面非常有必要。

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

创建一个新的SWFObject实例,并且传入一下参数:

  • swf - SWF文件路径
  • id - 您为这个SWF文件分配的id值,它将用于给embed与object标签设定name属性,以便于可以支持swliveconnect的功能,如动态传入变量
  • width - 宽度
  • height - 高度
  • version - FlashPlayer需要的版本号,它可以详细到 '主版本号.小版本号.细节',例如:"6.0.65"。一般地,我们只需传入主版本即可,例如:"6"
  • background-color - Flash资源的背景色,16进制格式

此外,还有如下可选参数:

  • quality - 画面质量,默认为"high"
  • xiRedirectUrl - 详见ExpressInstall相关
  • redirectUrl - 没有安装相应版本的播放器后自动跳转的目标地址
  • detectKey - 这是当忽略检测时,SWFObject将去url地址中查找的变量,默认值为“detectflash”,后续有详细介绍
so.write("flashcontent");

将Flash资源应用到DOM里,在浏览器显示出来。

细节

SWFObject 的灵活性非常好。您完全可以事先写好HTML的其他部分,最后再回过头来添加Flash内容。这样可以确保在客户端没有Flash的情况下,用户不会一无所获;也可以确保针对搜索引擎,做了什么样的关键词优化。您完全不用像以前那样担心客户端的各种状况

SWFObject兼容当前各种主流浏览器,如:PC上的IE5/5.5/6, Netscape 7/8,Firefox, Mozilla, and Opera。Mac上的IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+,各种浏览器的后续版本也会继续支持

SWFObject检测Flash播放器版本从3开始到最新的版本号,而且也消灭了IE中“激活”的麻烦。这里有相关背景

SWFObject可以方便地检查版本细节,例如我们需要v.6.0 r65 (or 6,0,65,0) 来处理SWF资源,就可以添加如下代码:

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");

SWFObject的版本检测可以人工忽略。如果在特定环境下您不希望SWFObject检测版本号,那么只需要传递一个参数在HTML页面中,就可以了。SWFObject可以捕获这个参数并且跳过检测,直接写入Flash嵌入代码到DOM中。用于忽略版本检测的变量名是“detectflash”,以下是一个例子:

<a href="mypage.html?detectflash=false">Bypass link</a>

SWFObject 范例

以上我们接触到的范例都最基础的,接下来我们列举一些其他功能,尤其是传入参数、变量这些使用频率较高的行为。

传入Flash内联参数的简单范例

<script type="text/javascript">   var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");   so.addParam("quality", "low");   so.addParam("wmode", "transparent");   so.addParam("salign", "t");   so.write("flashcontent");</script>

这里可以看到Flash支持的内联参数列表:full list of the current parameters and their possible values(adobe.com官方资源)

采用"Flashvars"参数传入变量

用Flashvars是在预加载Flash时传入数据的最佳做法,语法格式与GET变量串非常类似,如:variable1=value1&variable2=value2&variable3=value3SWFObject帮助您将这项工作变得更加明确化

<script type="text/javascript">   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");   so.addVariable("variable1", "value1");   so.addVariable("variable2", "value2");   so.addVariable("variable3", "value3");   so.write("flashcontent");</script>

这些变量将会保存在_root这个MovieClip对象里。

SWFObject还可以方便地直接从URL中接受参数传入Flash中,例如你有这样一个URL:http://www.example.com/page.html?variable1=value1&variable2=value2。采用getQueryParamValue()方法你就可以轻松获取这些参数,并将它们传入Flash,例如:

<script type="text/javascript">   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");   so.addVariable("variable1", getQueryParamValue("variable1"));   so.addVariable("variable2", getQueryParamValue("variable2"));   so.write("flashcontent");</script>

getQueryParamValue()方法同样可以获取JavaScript的Location对象的hash值“location.hash”来与swf内部进行通信。这里是一个采用SWFObject的应用程序,其中用到了location.hash对象:链接地址

在SWFObject中应用Express Install(利用官方自动升级接口)

SWFObject全面支持AdobeFlash播放器的自动升级功能(从6.0.65起的FlashPlayer支持在swf内部自动升级!),这样用户完全不用离开您的网页就能完成播放器的升级了。

首先,上传官方的expressinstall.swf到您的服务器上,然后使用useExpressInstall方法指定这个swf文件的地址就可以了,例如:

<script type="text/javascript">     var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");     so.useExpressInstall('expressinstall.swf');     so.write("flashcontent");  </script>

您可以安装一个低版本的Flash播放器然后访问这个页面看到效果

在SWFObject原文件压缩包中您可以找到具体的使用细节,您可以自己定制ExpressInstall的流程。

如果您的Flash影片在弹出窗口中,或者您希望用户在完成了ExpressInstall后重定向到其他地址,你可以采用xiRedirectUrl属性,来自动完成这一步骤。例如:

<script type="text/javascript">   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");   so.useExpressInstall('expressinstall.swf');   so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // must be the absolute URL to your site   so.write("flashcontent");</script>

下载

SWFObject基于MIT License,您可以免费任意使用。

下载 SWFObject 1.5 - Zip 文件, 包含 swfobject.js 和其他范例。

更多链接:

* 页面全部是 text/html格式,不是 application/xhtml+xml.

更多问题可以访问我们的论坛:SWFObject论坛!

独特优势

多年以来,各种各样的Flash播放器版本检测代码层出不穷,包括嵌入脚本也有许多。我们在这一部分针对流行的几种方法进行一个比较。

1) Adobe官方做法

这就是经典的Object标签和Embed标签配合做法,也是目前最常用的做法:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"    width="550" height="400" id="Untitled-1" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="mymovie.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"    height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"    type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /></object>

虽然是目前最常用的方法,但仍然有一些问题。

  • 缺乏播放器版本检测 没有播放器插件版本检测,用户会获得非常糟糕的体验,他们会在不知情的情况下看到ActiveX插件安装入口,这样会导致大部分用户离开。而且,用低版本播放器播放高版本的swf文件,会导致更多潜在问题,而用户会将一切问题归咎于您的产品
  • Eolas专利纠纷导致IE的近期发行版中需要进行一次“激活”点击才可以完成和Flash内容的交互。详细内容
  • 不符合XHTML规范 - 在HTML和XHTML中都没有embed标签HTML or XHTML。因为object标签在不同浏览器中的诡异表现,我们不得不用embed标签来完善最终效果。

2) 仅采用Object标签 / Flash satay

这种方法在2002年的A List Apart article出现之后开始大面积流行,这里有两个例子:

'仅含Object标签'

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"   width="300" height="120"> <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf">  <param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <!--[if !IE]> <--> <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"     width="300" height="120" type="application/x-shockwave-flash">  <param name="quality" value="high">  <param name="bgcolor" value="#FFFFFF">  <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">  FAIL (the browser should render some flash content, not this). </object> <!--> <![endif]--></object>

Flash satay

<object type="application/x-shockwave-flashdata="c.swf?path=movie.swf" width="400" height="300"><param name="movie" value="c.swf?path=movie.swf" /><img src="noflash.gif" width="200" height="100" alt="" /></object>
  • 可用性问题 - 采用 Flash Satay 的话, 一些屏幕阅读器会忽略swf内容.
  • Eolas专利纠纷导致IE的近期发行版中需要进行一次“激活”点击才可以完成和Flash内容的交互。详细内容
  • 缺乏播放器版本检测 没有播放器插件版本检测,用户会获得非常糟糕的体验,他们会在不知情的情况下看到ActiveX插件安装入口,这样会导致大部分用户离开。而且,用低版本播放器播放高版本的swf文件,会导致更多潜在问题,而用户会将一切问题归咎于您的产品
  • 早期的的Safari会忽略param标签 - 在这些版本:2.0 (Tiger) 或者 1.3 (Panther) 或者可能 1.2.8 (前Panther) 之前,Safari 完全忽略param 标签。这将会让你的Flashvars等参数无法传入。

3) 'small flash movie on the index page' 检测方法

这个方法会通过在首页放一个swf文件去访问$version 变量来返回版本信息。

问题在于:

  • 内页无检测 - 内页如果不放着这个swf就无法检测
  • “激活”问题
  • 不符合HTML或者XHTML规范
  • 影响搜索引擎索引排名

4) Adobe官方 Flash Player Detection 模块

Adobe官方这个模块非常不错,然而仍然有一些不足,它采用两种方法来检测

  1. Flash自身检测,如上面提到的"small Flash movie on the index page" - 缺点已经提过了
  2. Javascript - 混乱的代码让你的HTML变得非常难以维护

深入讨论在这里

5) 用纯粹的JS来检测、嵌入

这种方法看起来不错,但是仍然缺乏规范,而且消耗开发成本

  • 检测不够完善 - 通常只能检测到当前的Flash播放器发行版,而且升级也需要手工参与
  • 增加了 更多 代码 - 难以维护的DOM结构
  • 解决方案太笨重 - SWFObject进行了多次优化,非常轻量

常见问题

这里进入论坛可以与其他用户交流

问. 到底什么是 'IE的激活内容升级' 我听说过这件事情,SWFObject能应对它么?
答. 可以,更多详细信息可以看:这里
问. 在Flash资源加载前,相关区域的内容会有闪烁(仅IE有)
答. 这与 FOUC bug有关。
问. 用 SWFObject 嵌入多个SWF该怎么做?
答. 只要给每一个HTML结点唯一的id就可以了。
问. 如何使SWFObject兼容Netscape 4.x?
答. 这条评论包含相关信息。
问. 我如何在blog中使用SWFObject?
答. 这里有针对WordPress的插件: 这里
问. SWFObject 是否可以与 Dreamweaver 、 Golive协同工作?
答. 这里可以得到一个Dreamweaver 扩展在CommunityMX。目前还没有GoLive扩展。
问. 哪里可以找到其他语言的翻译?
答. 法语 ,瑞典语, 意大利语, 德语, 西班牙语, 波兰语(部分), 日语, 葡萄牙语,和 芬兰语
问. 有支持FlashIDE的发布插件么?
答. 有!你可以在这里得到: Fluid Flash Blog
问. 谁在使用SWFObject/FlashObject?
答. 这些网站: The Library of Congress, Adobe.com (制定的轻量版本), Amazon.com, Windows.com, YouTube.com, skype.com, Snapple.com, 包括 Adobe Photoshop (在Flash画廊中的) 和大量其他的网站. Colin Moock 也 推荐这种解决方案

© 2018 技术控 All Rights Reserved