1. 程式人生 > >解決SWFupload 瀏覽按鈕總顯示在頂層的問題 設定SWFupload 瀏覽按鈕顯示到底層

解決SWFupload 瀏覽按鈕總顯示在頂層的問題 設定SWFupload 瀏覽按鈕顯示到底層


做了一個上傳的公用元件,可是元件寫好後發現了一個嚴重級的bug,如果在上傳的頁面有公用元件,或彈出層、彈出框等功能,那麼瀏覽的那個按鈕就會特噁心地浮在最頂層,

正常上傳照片如上。當點選頁面內公用元件,彈出一個框時,“瀏覽”按鈕就顯眼地無恥地霸佔著中央的位置。於是本菜鳥是搜遍了網上各種各樣CSS控制層級的方法,調整該頁面各個DIVSpan標籤樣式,無果。沒經驗的我於是狠下決心,決定在swfupload.js檔案中找出到底是什麼在作祟。

修改頁面CSS只是治標不治本的表面工作,根本不能解決問題。在swfupload.js檔案裡找了半天,終於找到了設定flash展示方式的程式碼:

swfupload.js

檔案的大約90105行之間(因版本不同,各有差別)有這麼一段程式碼:

SWFUpload.WINDOW_MODE = {

WINDOW : "window",

TRANSPARENT : "transparent",

OPAQUE : "opaque"

};

window 模式預設情況下的顯示模式,在這種模式下flash player有自己的視窗控制代碼,這就意味著flash影片是存在於Windows中的一個顯示例項,並且是在瀏覽器核心顯示視窗之上的,所以flash只是貌似顯示在瀏覽器中,但這也是flash最快最有效率的渲染模式。由於他是獨立於瀏覽器的HTML渲染表面,這就導致預設顯示方式下flash

總是會遮住位置與他重合的所有DHTML層。但是大多數蘋果電腦瀏覽器會允許DHTML層顯示在flash之上,但當flash影片播放時會出現比較詭異的現象,比如DHTML層像被flash刮掉一塊一樣顯示異常。Opaque 模式這是一種無視窗模式,在這種情況下flash player沒有自己的視窗控制代碼,這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪製的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。Transparent 模式透明模式,在這種模式下flash player
會將stage的背景色alpha值將為0並且只會繪製stage上真實可見的物件,同樣你也可以使用z-index來控制flash影片的深度值,但是與Opaque模式不同的是這樣做會降低flash影片的回放效果,而且在9.0.115之前的flash player版本設定wmode=”opaque””transparent”會導致全屏模式失效。

找到這段程式碼後已經成功大半了,這裡只是定義三個引數,而具體swfupload是在哪裡設定flash展示方式的呢?

複製“WINDOW_MODE”在swfupload.js裡查詢,找找看在什麼地方,這個物件被引用了。然後你就會發現,問題其實很簡單。你已經搞定問題了。

什麼?你還沒搞定?那你繼續看吧。

接下來的事情就很簡單了,找到下面的這段程式碼所在位子:

this.ensureDefault("button_window_mode",SWFUpload.WINDOW_MODE.WINDOW);

大約是在145-148行之間找,絕對能找到。然後把WINDOW_MODE.WINDOW改成WINDOW_MODE.TRANSPARENT

測試一遍吧,測之前記得先部署下剛修改的js檔案,並且清理下瀏覽器快取。