使用SWFObject完美解決HTML插入Flash的各瀏覽器兼容性方案

字號:


    下面我們來共同學(xué)習(xí)一下
    一、傳統(tǒng)的方法
    代碼如下:
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="<a width="550" height="400" id="Untitled-1">
    <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" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="<a />
    </object>
    這方法是使用 object 和 embed 標簽來嵌入,細心的會發(fā)現(xiàn),object 的很多參數(shù)和 embed 里面的很多屬性是重復(fù)的,為什么這樣做?為了瀏覽器兼容性,有的瀏覽器支持 object,有的支持 embed,這也是為什么要修改 Flash 的參數(shù)時兩個地方都要改的原因。
    這種方法是 Macromedia 一直以來的官方方法,最大限度的保證了 Flash 的功能,沒有兼容性問題。但是它現(xiàn)在不那么好用了: 無法通過驗證,由于為了兼容性而嵌入的 embed 標簽是不符合 W3C 的規(guī)范的。當然,如果你不在乎什么規(guī)范不規(guī)范,另當別論。
    微軟由于種種原因,在 sp2 后限制了 IE 的 ActiveX 的使用模式,就是在頁面中的 ActiveX 有一個虛框,需要用戶點擊一次才能正常交互。Flash是作為一個 ActiveX 嵌入到網(wǎng)頁中的,所以它也會受牽連,只有通過 JS 嵌入 Flash 才能解決這個問題。
    沒有 Flash 版本檢測,如果版本瀏覽器的flash插件版本不夠,或者不能正常顯示你的 swf 文件,或者會彈出一個 ActiveX 的確認安裝的框——這個框?qū)芏嘤脩魜碚f是很恐怖的。
    二、用JS嵌入的方法
    用JS嵌入就是各有各的嵌入方法了,有嵌得好的有嵌得不好的。有人用 document.write 直接寫,這法子說實話不大好,感覺 hack 成分多了,有點為了驗證而驗證的意思,而且沒有體現(xiàn)出什么 JS 的優(yōu)勢。我覺得一個好的 JS 嵌入腳本,在保證 Flash 應(yīng)有功能的基礎(chǔ)上,要發(fā)揮 JS 的優(yōu)勢應(yīng)該要有版本檢測,要能很好解決可訪問性問題(也就是用戶在無法瀏覽 Flash 內(nèi)容或禁用 JS 的時候應(yīng)該如何處理的問題),要易于重復(fù)使用。
    我們這里要講的是SWFObject這個解決方案:
    “SWFObject”是利用Javascript 插入flash,好處多多,代碼簡潔,不會出現(xiàn)IE6下的“單擊此處以激活控件”的提示,并且能通過W3C驗證。不同于傳統(tǒng)的“object”插入flash的方法。
    SWFObject在新的2.x版本中,其最簡單的調(diào)用竟只需一句話,并且不需要等待頁面加載完成,這意味著你可以將這句話寫在頁面的任何地方。比以前的版本,要簡便多了。下面來看幾個簡單常用的調(diào)用方法:
    1、最簡單,最基本,只要想插入flash都能用到的經(jīng)典一句話。
    代碼如下:
    <div id="swfid"></div>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
    swfobject.embedSWF("test.swf", "swfid", "300", "120", "9.0.0", "expressInstall.swf");
    </script>
    注解:調(diào)用方法embedSWF——插入SWF文件,參數(shù)依次是@swf文件的地址;@用于裝入swf文件的容器(如div)的id;@flash的寬度;@flash的高度(當然,這里的寬高都可以使用諸如100%這樣的百分比來表示);@正常播放該flash所需的最低版本;@當版本低于要求時,執(zhí)行該swf文件,這里利用這個flash跳轉(zhuǎn)到官方下載最新版本的flash插件。(該參數(shù)可以省略)在同一個頁面插入多個flash到不同位置時,只要重復(fù)上面的語句,使用不同的容器id就可以了。
    2、給swf文件傳遞參數(shù)、變量、屬性的調(diào)用方法
    代碼如下:
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
    //1、使用Json初始化變量、參數(shù)、屬性
    var flashvars = {
    name1: "hello",
    name2: "world",
    name3: "foobar"
    };
    var params = {
    menu: "false"
    };
    var attributes = {
    id: "dynamicContent2",
    name: "dynamicContent2"
    };
    swfobject.embedSWF("test6_flashvars.swf", "content2", "300", "120", "6.0.0","expressInstall.swf", flashvars, params, attributes); </p> <p>//2、傳統(tǒng)的初始化設(shè)置,效果一樣
    var flashvars = {};
    flashvars.name1 = "hello";
    flashvars.name2 = "world";
    flashvars.name3 = "foobar";
    var params = {};
    params.menu = "false";
    var attributes = {};
    attributes.id = "dynamicContent3";
    attributes.name = "dynamicContent3";
    swfobject.embedSWF("test6_flashvars.swf", "content3", "300", "120", "6.0.0","expressInstall.swf", flashvars, params, attributes);
    //3、直接寫在后面,就一句話,簡潔剽悍,不拖泥帶水
    swfobject.embedSWF("test6_flashvars.swf", "content5", "300", "120", "6.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"dynamicContent5",name:"dynamicContent5"});
    </script>