關於網頁中Flash Player的wmode屬性的使用經驗

首先引用一篇關於flash wmode參數詳解的文章：http://www.blueidea.com/tech/web/2009/6469.asp

 

在做web開發中可能會遇到flash遮擋頁面中元素的情況，無論怎麼設定flash容器和層的深度(z-index)也無濟於事，現有的解決方案是在插入flash的embed或object標籤中加入”wmode”屬性並設定為wmode=“transparent”或”opaque”，但wmode屬性到底是什麼意義，為什麼可以解決這個問題呢？</p><p>window mode(wmode)</p><p>wmode即視窗模式總共有三種，看看當年Macromedia官方的說法：</p><p>Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.<br />Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don’t need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.<br />Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.<br />window 模式</p><p>預設情況下的顯示模式，在這種模式下flash player有自己的視窗控制代碼，這就意味著flash影片是存在於Windows中的一個顯示執行個體，並且是在瀏覽器核心顯示視窗之上的，所以flash只是貌似顯示在瀏覽器中，但這也是flash最快最有效率的渲染模式。由於他是獨立於瀏覽器的HTML渲染表面，這就導致預設顯示方式下flash總是會遮住位置與他重合的所有DHTML層。</p><p>但是大多數蘋果電腦瀏覽器會允許DHTML層顯示在flash之上，但當flash影片播放時會出現比較詭異的現象，比如DHTML層像被flash刮掉一塊一樣顯示異常。</p><p>Opaque 模式</p><p>這是一種無視窗模式，在這種情況下flash player沒有自己的視窗控制代碼，這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪製的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。</p><p>Transparent 模式</p><p>透明模式，在這種模式下flash player會將stage的背景色alpha值將為0並且只會繪製stage上真實可見的對象，同樣你也可以使用z-index來控制flash影片的深度值，但是與Opaque模式不同的是這樣做會降低flash影片的回放效果，而且在9.0.115之前的flash player版本設定wmode=”opaque”或”transparent”會導致全螢幕模式失效。</p><p>瞭解了各種模式的實現方式和意義在以後的開發中就可以按照具體情況選擇設定wmode屬性的值了。<br />

 

在項目中設定了wmode="transparent"，沒注意到會出現什麼問題。有次客戶提出來說使用智能ABC和五筆IME無法在文字框中輸入，後來查資料並測試發現確實是由於設定wmode屬性的問題，引用另一篇關於flash不能輸入文字的文章：http://hi.baidu.com/jackflit/blog/item/90f31b1984aae24242a9ad79.html

臨時湊合的辦法：設定wmode為Windows</p><p>這個問題主要出現在當flash設定了wmode屬性之後，在上述非主流非IE核心的瀏覽器中便無法輸入中文。究其原因是因為Flash這種模式很 少用到，這是一種無視窗模式，繪製和輸入取決於瀏覽器，這種模式對於Flash來說，繪製效率比較低，但是可以作為HTML的層來使用，並支援透明，因此 在國內還是挺常用的。在天書中使用這個，主要是為了支援滑鼠右鍵。</p><p>由於這種模式Flash控制項接收的輸入來自瀏覽器，因此需要瀏覽器對Flash的wmode特殊處理。</p><p>很不幸的是，除了IE對Flash ActiveX的wmode下的透明繪製和中文輸入處理的很完美，別的瀏覽器都支援的很差。有的甚至連透明都繪製成一片黑色，就一個簡單的IME輸入，都 懶得解決。比如Firefox論壇上，這個問題從若干年前就被人發現了，一直無人修改，不光中文，所有依賴於IME的輸入都不行，包括歐洲一些國家的輸入 法。</p><p>天書用過兩個解決方案</p><p>1. 頁面上放置一個html的textfield，AS封裝一個TextField，通過AS和JS通訊，在需要輸入的時候把這個輸入框挪過去。</p><p>優點：支援各種IME，支援輸入框右鍵<br />缺點：不夠優雅，AS和JS互連迅，JS載入失敗則沒戲</p><p>2. 實現一個帶中文IME的TextField，用這個框替代所有的TextField</p><p>優點：乾淨優雅，不容易出錯，相容性好<br />缺點：只支援自己實現的IME，易用性差<br />

 

我在測試的時候發現，設定了wmode屬性為transparent後，IE8瀏覽器下，智能ABC不能輸入到文字框中，在IE6和IE9就卻可以（也有個同事再IE8下沒有問題，不瞭解什麼原因）；在Firefox瀏覽器下，中文輸入特別卡，要等待好幾秒才能把文字輸入進去，看樣確實是在無視窗模式下flash的繪製效率比較低。在此感謝上文的作者提供的問題原因及解決思路。