前端頁面js與flash互動——js擷取flash對象，並傳遞參數

標籤：style   java   tar   c   http   int   

背景介紹：

　　最近在搞一個項目，涉及到圖片選取，裁剪，上傳等，由於瀏覽器安全性問題，js無法擷取到<input type="file">中選取的檔案路徑，而且對照片的裁剪，摳圖等由HTML5實現的功能，對各大瀏覽器的相容性，真是不敢太大膽。這個時候就引進了flash，然後所有js做不了的讓flash來做，然後由js來控制頁面元素。就這樣開始了js與as的互動之旅，聽做flash的大叔說，flash調js的函數式很好調的，而js調as不大容易。最終的情況是as調js錯誤層出不窮，花費了很多時間在上面，當然了，期初js調as也走了彎路，因為之前沒有跟flash打過交道，所以只能任由別人說了，但是貌似還不是咱們js的問題，因為網上現成的方法就很多的了，廢話不多說，把項目中js調用as的代碼共用出來。

 

重要內容

//擷取flash對象
function getSWF(name){
var e=document.getElementById(name);
return (navigator.appName.indexOf("Microsoft") != -1)?e:e.getElementsByTagName("embed")[0];
}

為什麼要這樣呢，因為在瀏覽器中嵌入flash一般採用如下格式：

<object>

       <embed></embed>

</object>

因為IE（微軟家的），其他（Mozilla家的Firefox，Google家的chrome等等）在對HTML文檔進行解析的時候存在差異，所以如果面對不同的瀏覽器，通用一個方法，自己都不知道錯在哪裡，但是你真的錯了！

 

代碼詳解

上面的函數getSWF()顧名思義，就是擷取文檔中嵌入的flash對象，navigator是瀏覽器對象，Navigator 對象中包含有關瀏覽器的資訊。

相關的資訊可參考：http://www.w3school.com.cn/jsref/dom_obj_navigator.asp；

所以後面的appName就是Navigator對象中叫“appName”的屬性，這個屬性記錄了navigator.appName擷取到的是瀏覽器的名稱，當前5大主流瀏覽器的appName值如下：

IE:                                                瀏覽器名稱：Microsoft Internet

FF,Chrome,Opera,Safari:                 瀏覽器名稱：Netscape

瀏覽器appName測試地址：http://www.w3school.com.cn/tiy/t.asp?f=hdom_browser；

indexOf()是Javascript函數，indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置

stringObject.indexOf("str",num);stringObject就是被尋找的字串對象，str是要尋找的字串，num是起始位置，如果查詢到了“str”字串存在於stringObject中，則返回第一個出現的位置，如果要檢索的字串值沒有出現，則該方法返回 -1；

var e = document.getElementById(name); 是擷取文檔中屬性id的值為name的節點對象，並把這個對象賦給e，

return (navigator.appName.indexOf("Microsoft") != -1)?e:e.getElementsByTagName("embed")[0];看上去好像很複雜，起始很簡單的，這裡是一個三木運算（學過編程的都應該知道），具體的格式為 if(a)?b:c;意思就是當if(a)為true時取值為b,if(a)不為true時，取值為c。可以把這句長長的代碼分解成if(a)?b:c;的格式
navigator.appName.indexOf("Microsoft")!=-1         e         e.getElementsByTagName("embed")[0]    這三個部分

if(navigator.appName.indexOf("Microsoft")!=-1){    alert("我的瀏覽器不是IE核心的");   }else{"我的瀏覽器是IE核心的"}
當彈窗為“我的瀏覽器不是IE核心的” 的時候說明我的瀏覽器的名稱中沒有包含“Microsoft”，就是說沒有用IE瀏覽器，這個時候要擷取的flash對象就是文檔中的<object></object>對象，如果是IE瀏覽器，則擷取到的是<embed></embed>這個對象，無論獲得那個對象，最終都要用return返回給調用的函數，這樣就可以在不同的瀏覽器裡獲得相對應的flash對象。

 

整體方案：

擷取了flash 對象之後就可以調用flash裡面的方法，或者flash裡面的屬性了。

var objName = getSWF("FlashToJS");

//調用對象的flash_selFiles方法
if(objName){
objName.flash_cutPic(arg);
}else{
console.log("沒有擷取到對象");
}

這就調到了flash裡裡面的flash_selFiles()方法。

 

最後的感言

在頁面中還是盡量減少使用flash，特別是別對flash太過於依賴，在as與js的互動中還是隱藏著很多的陷阱的。報告完畢！