一直想對(duì)這個(gè)應(yīng)用做個(gè)總結(jié),今天偶然百度到這個(gè)效果,為此做個(gè)筆記。
用這個(gè)js的好處:
1.IE中沒(méi)有討厭的虛框問(wèn)題了。
2.提供了完善的版本檢測(cè)功能,如果版本不夠則顯示其他東西,比如圖片或文字。
3.易于使用,只要在頁(yè)面頭加載一個(gè) .js 文件,然后 HTML 寫(xiě)一個(gè)容器,里面放普通的文本或圖片(用于無(wú)法顯示 Flash 時(shí)顯示),最后用腳本來(lái)替換這個(gè)元素里面的內(nèi)容為 Flash。
4.使得插入Flash媒體資源盡量簡(jiǎn)捷、安全。而且它是非常符合搜索引擎優(yōu)化的原則的。
5.能夠避免HTML、XHTML中出現(xiàn)object、embed等非標(biāo)準(zhǔn)標(biāo)簽,從而符合更加標(biāo)準(zhǔn)。
只需要包含 swfobject.js這個(gè)js文件,然后在DOM中插入一些簡(jiǎn)單的JS代碼,就能嵌入Flash媒體資源了。下面是一個(gè)最簡(jiǎn)單的范例:
1 2 3 4 5 6 7 8 9 10 11 12 13 | < script type = "text/javascript" src = "swfobject.js" ></ script >
< script type = "text/javascript" >
var so = new SWFObject("movie.swf", "mymovie", "400", "100%", "8", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.addVariable("variable1", "value1");
so.addVariable("variable2", "value2");
so.addVariable("variable3", "value3");
so.addVariable("variable1", getQueryParamValue("variable1"));
so.addVariable("variable2", getQueryParamValue("variable2"));
so.write("flashcontent");
</ script >
|
<div
id="flashcontent">[...]</div>首先,我們要為SWF資源預(yù)留一個(gè)HTML結(jié)點(diǎn)。這個(gè)HTML結(jié)點(diǎn)內(nèi)的所有內(nèi)容都會(huì)在客戶端被Flash資源替換,當(dāng)客戶端沒(méi)有安裝Flash播放器的時(shí)候,這些內(nèi)容會(huì)顯示出來(lái)。這一特色在SEO以及對(duì)用戶體驗(yàn)方面非常有必
要。
var so = new SWFObject(swf, id, width, height, version, background-color [,
quality, xiRedirectUrl, redirectUrl, detectKey]);創(chuàng)建一個(gè)新的SWFObject實(shí)例,并且傳入一下參數(shù):
swf - SWF文件路徑
id
- 您為這個(gè)SWF文件分配的id值,它將用于給embed與object標(biāo)簽設(shè)定name屬性,以便于可以支持swliveconnect的功能,如動(dòng)態(tài)傳
入變量
width - 寬度
height - 高度
version -
FlashPlayer需要的版本號(hào),它可以詳細(xì)到 '主版本號(hào).小版本號(hào).細(xì)節(jié)',例如:"6.0.65"。一般地,我們只需傳入主版本即可,例如:"6"。
background-color
- Flash資源的背景色,16進(jìn)制格式
此外,還有如下可選參數(shù):
quality - 畫(huà)面質(zhì)量,默認(rèn)為"high"。
xiRedirectUrl
- 詳見(jiàn)ExpressInstall相關(guān)
redirectUrl - 沒(méi)有安裝相應(yīng)版本的播放器后自動(dòng)跳轉(zhuǎn)的目標(biāo)地址
detectKey
- 這是當(dāng)忽略檢測(cè)時(shí),SWFObject將去url地址中查找的變量,默認(rèn)值為“detectflash”,后續(xù)有詳細(xì)介紹
so.write("flashcontent");將Flash資源應(yīng)用到DOM里,在瀏覽器顯示出來(lái)。
解釋一下這些參數(shù)的作用:
var so = new SWFObject(swf, id, width, height, version, background-color
[, quality, xiRedirectUrl, redirectUrl, detectKey]);
//這段是SWFObject必須的基本參數(shù),所有SWFObject都必須包含的。
so.addParam("Param1",
"Param2");
//這里是給Flash添加內(nèi)聯(lián)參數(shù),可以實(shí)現(xiàn)諸如背景透明之類(lèi)的效果。依照需求添加就可以了,參數(shù)和emded/object標(biāo)簽是一樣的代碼,下同。
so.addParam("Param3", "Param4");
so.addParam("Param5", "Param6");
so.addVariable("variable1", "value1");
//這里是給Flash添加FlashVar,這是以FlashVar的方式給Flash的Root添加變量,對(duì)于Number型變量在Flash端需要
做類(lèi)型轉(zhuǎn)換。
so.addVariable("variable2", "value2");
so.addVariable("variable3", "value3");
so.addVariable("variable1",
getQueryParamValue("variable1"));
//Flash獲取URL變量對(duì)于url?arg1=test1&arg2=test2這樣用GET方式傳遞變量的URL,我們可以用 getQueryParamValue方法來(lái)獲取變量。
so.addVariable("variable2", getQueryParamValue("variable2"));
so.write("content");
//這里是至關(guān)重要的一個(gè)地方,他是用一段特定內(nèi)容取代Flash無(wú)法顯示時(shí)的內(nèi)容。可以事先在CSS里定義好樣式,在文檔里使用div標(biāo)簽寫(xiě)出來(lái)。這里
在調(diào)用過(guò)來(lái)。
=========================================
焦點(diǎn)圖示例:
<script type="text/javascript"> |
|
|
|
| if(top.window.location.href != window.location.href) |
| { |
| top.window.location.href = window.location.href |
| } |
|
|
| /*動(dòng)態(tài)嵌入方法不適用ExternalInterface.addCallback方*/ |
| var flashvars_focus = { |
| |
| <!--index_xwzx--> |
| pic0:"/docs/xwzx/2013-07-17/img/1374024016933.jpg",link0:"http://www.//docs/zxdt/2013-07-17/1374023702642.html",title0:"北京海外學(xué)人中心舉辦《外國(guó)人永久居留證》政策說(shuō)明會(huì)", |
| pic1:"/docs/xwzx/2013-07-08/img/1373272641459.jpg",link1:"http://www.//docs/zxdt/2013-07-08/1373269308002.html",title1:"北京海外高層次人才京郊行首站延慶交流活動(dòng)舉行", |
| pic2:"/docs/xwzx/2013-07-08/img/1373333469575.jpg",link2:"http://www.//docs/zxdt/2013-07-08/1373265378624.html",title2:"北京海外學(xué)人中心分中心培訓(xùn)班成功舉辦", |
| pic3:"/docs/xwzx/2013-06-27/img/1372312575224.jpg",link3:"http://www.//docs/zxdt/2013-06-27/1372311533969.html",title3:"北京海外學(xué)人中心副主任趙峰帶隊(duì)到京津科技谷考察", |
| picNumber:"4",<!--index_xwzx--> |
| myTimer:3 |
| }; |
| var params_focus = { |
| wmode:"transparent" |
| }; |
| var attributes_focus = { |
| id: "focusIndex", |
| name: "focusFlash" |
| }; |
| swfobject.embedSWF("images/focusPic.swf", "focus", "384", "236", "9.0.0","expressInstall.swf", flashvars_focus, params_focus, attributes_focus); |
| </script> |
|
|
<!--焦點(diǎn)圖 --> |
|
| <div class="focus_box"> |
| <div id="focus"></div> |
| </div> |