|
最近做的事和Flash打交道比較多,簡單來說,就是要在第三方的頁面引入一個Flash的廣告,播放一會,讓用戶能夠關閉。
起初總覺得,就引入一個Flash嘛,adobe都給出了官方的使用方法,直接拿來用不就成了。頂多IE下不支持object元素的appendChild,大不了拼接字符串然后通過innerHTML來創建就好了。
但是真正做的時候,開始測試各個瀏覽器的時候,才發現情況遠沒有想的這么簡單
關于如何引入Flash
這大概是最基本的問題,其他的一切問題都是基于Flash可以正確引入到DOM中這個前提的。
最先的方式自然是使用adobe給出的官方方式,即objectembed //object的結構來嵌入一個Flash。根據各種資料,embed標簽用于Firefox,而object標簽用于IE,兩者合在一起,就是一相相對完美的方式。
但是事情絕對不會就這樣完結,這個時候號稱最先進最標準的Chrome瀏覽器過來插了一腳:當使用objectembed //object結構來嵌入Flash時,在Chrome中會出現Flash不顯示的問題。
關于這個問題,他必須有2個前提:
- 使用objectembed //object的結構引入Flash。
- 在object前,有一個元素有background-image。
當以上兩個條件都滿足時,如果打開這個頁面,特別是在本地打開,有一定機率會看不到Flash。但是Flash確實存在,甚至連Flash的聲音都可以聽到,僅僅是瀏覽器沒有將其繪制在屏幕之上。
由于該問題與網絡環境有著聯系,在本地特別容易重現,可以將這個頁面的源碼保存為一個htm文件,在本地打開,刷新幾次,應該就能看到這個問題了。
為了這個問題,最后決定推翻objectembed //object的DOM結構。因為object和embed兩者是獨立的,因此就在各瀏覽器之間測試了標簽的兼容性,得出的結果是embed標準可以被現有的幾乎所有瀏覽器支持,包括了IE、Firefox、Chrome和Opera。最后,也在這篇文章上對引入Flash的方式有了最終的確認,僅使用embed標簽足夠引入Flash。而在去除object標簽后,Chrome下的詭異問題也隨之消失了。
關于如何移除Flash
又是一個看上去很簡單的問題,最簡單地代碼自然是:
var element = document.getElementById('someFlash');
element.parentNode.removeChild(element);
it知識庫:引入Flash那些事,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。