使用Object、param標籤在頁面顯示PDF檔案
object、param標籤及頁面顯示PDF檔案的方法
一、object、param標籤
HTML <object> 標籤
定義和用法
定義一個嵌入的物件。請使用此元素向您的 XHTML 頁面新增多媒體。此元素允許您規定插入 HTML 文件中的物件的資料和引數,以及可用來顯示和操作資料的程式碼。
<object> 標籤用於包含物件,比如影象、音訊、視訊、Java applets、ActiveX、PDF 以及 Flash。
object 的初衷是取代 img 和 applet 元素。不過由於漏洞以及缺乏瀏覽器支援,這一點並未實現。
瀏覽器的物件支援有賴於物件型別。不幸的是,主流瀏覽器都使用不同的程式碼來載入相同的物件型別。
而幸運的是,object 物件提供瞭解決方案。如果未顯示 object 元素,就會執行位於 <object> 和 </object> 之間的程式碼。通過這種方式,我們能夠巢狀多個 object 元素(每個對應一個瀏覽器)。
例項
向 HTML 程式碼新增一個物件:
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object> |
瀏覽器支援
幾乎所有主流瀏覽器都擁有部分對 <object> 標籤的支援。
HTML 與 XHTML 之間的差異
NONE
提示和註釋:
註釋:<param> 標籤定義用於物件的 run-time 設定。
註釋:不要對影象使用 <object> 標籤,請使用 <img> 標籤代替。
可選的屬性
屬性 | 值 | 描述 | DTD |
align |
| 定義圍繞該物件的文字對齊方式。 | TF |
archive | URL | 由空格分隔的指向檔案檔案的 URL 列表。這些檔案檔案包含了與物件相關的資源。 | STF |
border | pixels | 定義物件周圍的邊框。 | TF |
classid | class ID | 定義嵌入 Windows Registry 中或某個 URL 中的類的 ID 值,此屬性可用來指定瀏覽器中包含的物件的位置,通常是一個 Java 類。 | STF |
codebase | URL | 定義在何處可找到物件所需的程式碼,提供一個基準 URL。 | STF |
codetype | MIME type | 通過 classid 屬性所引用的程式碼的 MIME 型別。 | STF |
data | URL | 定義引用物件資料的 URL。如果有需要物件處理的資料檔案,要用 data 屬性來指定這些資料檔案。 | STF |
declare | declare | 可定義此物件僅可被宣告,但不能被建立或例示,直到此物件得到應用為止。 | STF |
height | pixels | 定義物件的高度。 | STF |
hspace | pixels | 定義物件周圍水平方向的空白。 | TF |
name | unique_name | 為物件定義唯一的名稱(以便在指令碼中使用)。 | STF |
standby | text | 定義當物件正在載入時所顯示的文字。 | STF |
type | MIME_type | 定義被規定在 data 屬性中指定的檔案中出現的資料的 MIME 型別。 | STF |
usemap | URL | 規定與物件一同使用的客戶端影象對映的 URL。 | STF |
vspace | pixels | 定義物件的垂直方向的空白。 | TF |
width | pixels | 定義物件的寬度。 | STF |
標準屬性
id, class, title, style, dir, lang, xml:lang
如需完整的描述,請參考標準屬性。
事件屬性
accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
如需完整的描述,請參考事件屬性。
二、網頁內嵌多媒體 IE,Mozilla、Firefox、NetScape、Opera 2
2008-09-23 14:59
(一)完美內嵌 Quicktime
1、客戶端要求:
對於 Windows 使用者和 Mac OS X 使用者,安裝相應版本的 QuickTime 播放器即可。Windows 版下載 QuickTimeinstaller.exe,Mac OS X 版下載 QuickTimeinstaller.exe
Windows 使用者也可以安裝暴風影音等帶有 QuickTime 解碼器和瀏覽器外掛的其他播放器,例如暴風影音。
對於 Linux 以及 FreeBSD、Solaris 等 Unix 系統使用者,需要 VLC media player及其瀏覽器外掛或者 MPlayer 及其瀏覽器外掛。
2、實現程式碼:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="420" height="360"> <param name="autoplay" value="true" /> <param name="src" value="mov%2F%B2%E2%CA%D4%2Emov" /> <embed src="mov%2F%B2%E2%CA%D4%2Emov" type="video/quicktime" autoplay="true" width="420" height="360"> </embed> </object> |
3、要點分析:
QuickTime 格式的內嵌比較簡單,像上面那樣寫就可以了,基本上沒有什麼要注意的地方。媒體路徑 src 的值,可以是完整地址,也可以是相對地址,可以用 url 編碼,也可以不編碼,QuickTime 外掛和 VLC 外掛都能正確的支援,當然為了保險起見,最好還是採用 url 編碼方式裡寫媒體路徑。
雖然 embed 中指定的是 video/quicktime 型別,但是即使連結的媒體是 mp3 仍然能播放。對於 QuickTime 支援的其他型別的沒有進行測試,但我想應該也是可以的。
(二)完美內嵌 Flash
1、客戶端要求:
安裝你所使用的瀏覽器的 Flash 外掛。
2、實現程式碼:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="420" height="320"> <param name="movie" value="flash/打電話記.swf" /> <param name="quality" value="high" /> <embed src="flash/打電話記.swf" quality="high" type="application/x-shockwave-flash" width="420" height="320"></embed> </object> |
3、要點分析:
對於 Flash 似乎沒什麼好說的,因為這個用的很普遍。在這裡寫下來只是為了查閱方便,算是湊數吧。呵呵。
(三)讓內嵌多媒體通過 XHTML 驗證
1、問題:
上面的所有的程式碼,雖然能夠完美的在各個瀏覽器上很好的播放了,但是還有一點美中不足,那就是這樣的頁面無法通過 XHTML 驗證。原因是 embed 標籤從來都不是 HTML 標準中的標籤,因此 XHTML 中也沒有它。
2、解決:
如果你不在乎你的網頁是否符合標準,那照上面那樣做就可以了。如果你還想追求更加完美,請看下面的解決方案:
下面以 flash 為例來介紹,方法同樣適用於其他型別的多媒體內容。
我們知道 W3C 推薦使用的是 object 標籤,但用法卻不是 Internet Explorer 那種用 classid 來區分控制元件型別,而是採用 type 來指定 MIME 型別。現在的 Mozilla、Firefox 和 Opera 都支援這種用法,雖然 IE 目前的版本也支援這種用法,不過很可惜的是,IE 還是有 bug,那就是隻有全部下載完畢才能播放。而且還不是所有的情況下都能用。在某些 IE 瀏覽器上還顯示空白。所以單純用 W3C 推薦的 object 標籤用法還是不夠的。但是我們可以作一下變通,如果是使用者瀏覽器是 IE 的話,我們就用 IE 的 object 的用法,如果是其他瀏覽器,我們就採用 W3C 的用法。這樣就可以兩全其美了。也許此刻,你覺得我們該用到指令碼了。不,我們不需要指令碼。我們只需要用 IE 所特有的條件註釋和 CSS 就可以做到了。例子如下:
<style type="text/css"> <object |
你會發現其實就是把 embed 替換成了 object,而且位置也從 IE 的 object 中移出來了。embed 標籤裡的 src 屬性在 object 中變成了 data 屬性。而 firefox 等非 IE 瀏覽器因為不認識 <!–[if IE]> 標籤,所以其中的部分都當作註釋忽略了。而 IE 因為執行了 <!–[if IE]> 中的內容,所以 firefox 中可以識別的那個 object 因為 css 被重新定義而被隱藏了。
三、如何直接在網頁中顯示PDF檔案
2011-06-17 15:52:49
1、 embed
<embed width="800" height="600" src="test_pdf.pdf"> </embed> |
通過的瀏覽器:360、Firefox、IE、Chrome
2、Object
<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="600" border="0"> <param name="SRC" value="test_pdf.pdf"> </object> |
通過的瀏覽器:360、IE
未通過的瀏覽器:Firefox、Chrome
3、 iFrame框架
<iframe src="test_pdf.pdf" width="800" height="600"></iframe> |
通過的瀏覽器:360、Firefox、IE、Chrome
通過的瀏覽器:360、Firefox、IE、Chrome
以上四種方式均在WinXP下。(之前有碰到過上傳的功能在Win7下失效的情況,故在此說明一下OS)