前端頁面js與flash交互——js獲取flash對象,並傳遞參數


背景介紹

  最近在搞一個項目,涉及到圖片選取,裁剪,上傳等,由於瀏覽器安全性問題,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家的火狐,谷歌家的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的交互中還是隱藏着很多的陷阱的。報告完畢!

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM