一、object
1.定義與用法
<object>標(biāo)簽定義一個(gè)嵌入的對(duì)象。使用此元素可向 XHTML 頁面添加多媒體茵宪。此元素允許規(guī)定插入 HTML 文檔中的對(duì)象的數(shù)據(jù)和參數(shù)蟹倾，以及可用來顯示和操作數(shù)據(jù)的代碼弟胀。
<object> 標(biāo)簽用于包含對(duì)象，比如圖像喊式、音頻孵户、視頻、Java applets岔留、ActiveX夏哭、PDF 以及 Flash。
object 的初衷是取代 img 和 applet 元素献联。不過由于漏洞以及缺乏瀏覽器支持竖配，這一點(diǎn)并未實(shí)現(xiàn)。
瀏覽器的對(duì)象支持有賴于對(duì)象類型里逆。不幸的是进胯，主流瀏覽器都使用不同的代碼來加載相同的對(duì)象類型。
而幸運(yùn)的是原押，object 對(duì)象提供了解決方案胁镐。如果未顯示 object 元素，就會(huì)執(zhí)行位于 <object> 和 </object> 之間的代碼。通過這種方式盯漂，我們能夠嵌套多個(gè) object 元素（每個(gè)對(duì)應(yīng)一個(gè)瀏覽器）颇玷。
可用屬性:
| 屬性 | 值 | 描述 |
|---|---|---|
| align | leftrighttopbottom | 定義圍繞該對(duì)象的文本對(duì)齊方式。 |
| archive | URL | 由空格分隔的指向檔案文件的 URL 列表就缆。這些檔案文件包含了與對(duì)象相關(guān)的資源帖渠。 |
| border | pixels | 定義對(duì)象周圍的邊框。 |
| classid | class ID | 定義嵌入 Windows Registry 中或某個(gè) URL 中的類的 ID 值竭宰，此屬性可用來指定瀏覽器中包含的對(duì)象的位置空郊，通常是一個(gè) Java 類。 |
| codebase | URL | 定義在何處可找到對(duì)象所需的代碼切揭，提供一個(gè)基準(zhǔn) URL渣淳。 |
| codetype | MIME type | 通過 classid 屬性所引用的代碼的 MIME 類型。 |
| data | URL | 定義引用對(duì)象數(shù)據(jù)的 URL伴箩。如果有需要對(duì)象處理的數(shù)據(jù)文件,要用 data 屬性來指定這些數(shù)據(jù)文件入愧。 |
| declare | declare | 可定義此對(duì)象僅可被聲明，但不能被創(chuàng)建或例示嗤谚，直到此對(duì)象得到應(yīng)用為止棺蛛。 |
| form | form_id | 規(guī)定對(duì)象所屬的一個(gè)或多個(gè)表單。 |
| height | pixels | 定義對(duì)象的高度巩步。 |
| hspace | pixels | 定義對(duì)象周圍水平方向的空白旁赊。 |
| name | unique_name | 為對(duì)象定義唯一的名稱（以便在腳本中使用）。 |
| standby | text | 定義當(dāng)對(duì)象正在加載時(shí)所顯示的文本椅野。 |
| type | MIME_type | 定義被規(guī)定在 data 屬性中指定的文件中出現(xiàn)的數(shù)據(jù)的 MIME 類型终畅。 |
| usemap | URL | 規(guī)定與對(duì)象一同使用的客戶端圖像映射的 URL。 |
| vspace | pixels | 定義對(duì)象的垂直方向的空白竟闪。 |
| width | pixels | 定義對(duì)象的寬度离福。 |
一個(gè)簡單的object使用示例如下：
<!-- 使用object播放flash文件 -->
<object data="test.swf" />
2.object與param
<param>標(biāo)簽的作用是向插件傳參，實(shí)現(xiàn)插件的run-time設(shè)置炼蛤。不同的插件腳本可傳參數(shù)不同妖爷，開發(fā)者需閱讀相關(guān)參數(shù)文檔。<param>標(biāo)簽應(yīng)僅出現(xiàn)在<object>或<applet>標(biāo)簽內(nèi)理朋。
可用屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| name | unique_name | 定義參數(shù)的名稱（用在腳本中）絮识。 |
| type | MIME type | 規(guī)定參數(shù)的 MIME 類型（internet media type）。 |
| value | value | 規(guī)定參數(shù)的值嗽上。 |
| valuetype | data ref object | 規(guī)定值的 MIME 類型次舌。 |
下面是object標(biāo)簽配合param標(biāo)簽向Java Applet插件傳參的示例：
這是一個(gè)簡單的Java Applet示例：
//Java Applet插件-TestApplet.java
import java.applet.*;
import java.awt.*;
public class HelloWorldApplet extends Applet
{
public void paint (Graphics g)
{
// 獲取param標(biāo)簽傳來的參數(shù)-helloStr，并顯示出來
g.drawString (getParameter("helloStr") , 25, 50);
}
}
在html中使用TestApplet插件:
<!-- classid屬性代表TestApplet對(duì)應(yīng)的class ID值-->
<object classid="clsid:xxxxxx">
<param name="helloStr" value="Hello World!" />
</object>
二兽愤、embed
1.定義與用法
<embed> 標(biāo)簽定義嵌入的內(nèi)容彼念，比如插件挪圾。
可用屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| height | pixels | 設(shè)置嵌入內(nèi)容的高度。 |
| src | url | 嵌入內(nèi)容的 URL国拇。 |
| type | type | 定義嵌入內(nèi)容的類型洛史。 |
| width | pixels | 設(shè)置嵌入內(nèi)容的寬度惯殊。 |
一個(gè)簡單的embed使用示例如下：
<embed src="helloworld.swf" />
embed支持的嵌入內(nèi)容的類型參數(shù)很多酱吝，具體請(qǐng)看這篇HTML embed標(biāo)簽完整的MIME 類型列表
三、object與embed的異同
object與embed標(biāo)簽的作用都是用來嵌入插件對(duì)象土思。但他們又有如下的不同點(diǎn)：
- 瀏覽器的兼容性不同
IE瀏覽器對(duì)object標(biāo)簽有更好的兼容性务热，而非IE瀏覽器對(duì)embed標(biāo)簽則有更好的兼容性。在IE瀏覽器中己儒，雖然能使用embed標(biāo)簽嵌入插件崎岂，但是一些屬性將失效，如在embed標(biāo)簽中使用align屬性闪湾，非IE瀏覽器下有效冲甘，但在IE瀏覽器下將失效:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>embed使用測試</title>
</head>
<body>
<h2 style="margin-bottom: 10px;">《都挺好》</h2>
<p style="margin: 0 15px;">
<!-- 在IE瀏覽器下，align屬性將失效途样，失去視頻環(huán)繞文字的效果 -->
<embed style="margin-left: 15px;" width="550" height="400" src="https://vd3.bdstatic.com/mda-jc0rwgwif0wmz1aw/mda-jc0rwgwif0wmz1aw.mp4?playlist=%5B%22hd%22%2C%22sc%22%5D" align="right" />
<span style="line-height: 25px; text-align: justify;">表面上無限風(fēng)光的蘇家江醇，隨著蘇母的突然離世，瞬間分崩離析何暇。意想不到的隱患層層顯露陶夜，對(duì)毫無主見卻又自私、小氣的蘇父的安置和后續(xù)生活問題裆站，打破了遠(yuǎn)在國外的大哥與本城的二哥 条辟、小妹三家的平靜生活。父親蘇大強(qiáng)終于擺脫了妻子的鐵腕宏胯，對(duì)幾個(gè)孩子變本加厲羽嫡，不斷提出過分要求。在美國工作的老大蘇明哲回到國內(nèi)肩袍，一心要挑起家庭重?fù)?dān)厂僧，卻力不能及不堪重負(fù)，致使妻子孩子與其不斷疏遠(yuǎn)了牛。一直啃老的老二蘇明成毫無悔改之心颜屠，貪慕虛榮一心發(fā)財(cái)，從而導(dǎo)致事業(yè)和家庭的雙重慘敗鹰祸。最不受父母待見甫窟，十八歲起就和家里斷絕經(jīng)濟(jì)往來的老小蘇明玉，曾發(fā)誓與這個(gè)家庭劃清界限蛙婴，卻因親情牽絆粗井，再次攪進(jìn)了蘇家的泥潭之中，在蘇家的一次次危機(jī)中出手相助。最終浇衬，蘇家人明白到懒构，雖然有血脈相連，但是一家人彼此間的溝通也不能忽視耘擂，終于實(shí)現(xiàn)了親情的回歸胆剧。</span>
</p>
</body>
</html>
但是如果將embed標(biāo)簽換成object標(biāo)簽，則align屬性不會(huì)失效：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>embed使用測試</title>
</head>
<body>
<h2 style="margin-bottom: 10px;">《都挺好》</h2>
<p style="margin: 0 15px;">
<!-- 使用object標(biāo)簽代替embed標(biāo)簽 -->
<object style="margin-left: 15px;" width="550" height="400" data="https://vd3.bdstatic.com/mda-jc0rwgwif0wmz1aw/mda-jc0rwgwif0wmz1aw.mp4?playlist=%5B%22hd%22%2C%22sc%22%5D" align="right"></object>
<span style="line-height: 25px; text-align: justify;">表面上無限風(fēng)光的蘇家醉冤，隨著蘇母的突然離世秩霍，瞬間分崩離析。意想不到的隱患層層顯露蚁阳，對(duì)毫無主見卻又自私铃绒、小氣的蘇父的安置和后續(xù)生活問題，打破了遠(yuǎn)在國外的大哥與本城的二哥 螺捐、小妹三家的平靜生活颠悬。父親蘇大強(qiáng)終于擺脫了妻子的鐵腕，對(duì)幾個(gè)孩子變本加厲定血，不斷提出過分要求赔癌。在美國工作的老大蘇明哲回到國內(nèi)，一心要挑起家庭重?fù)?dān)糠悼，卻力不能及不堪重負(fù)届榄，致使妻子孩子與其不斷疏遠(yuǎn)。一直啃老的老二蘇明成毫無悔改之心倔喂，貪慕虛榮一心發(fā)財(cái)铝条，從而導(dǎo)致事業(yè)和家庭的雙重慘敗。最不受父母待見席噩，十八歲起就和家里斷絕經(jīng)濟(jì)往來的老小蘇明玉班缰，曾發(fā)誓與這個(gè)家庭劃清界限，卻因親情牽絆悼枢，再次攪進(jìn)了蘇家的泥潭之中埠忘，在蘇家的一次次危機(jī)中出手相助。最終馒索，蘇家人明白到莹妒，雖然有血脈相連，但是一家人彼此間的溝通也不能忽視绰上，終于實(shí)現(xiàn)了親情的回歸旨怠。</span>
</p>
</body>
</html>
雖然IE對(duì)object的兼容性較好，但是在一些低版本的IE瀏覽器下蜈块，object也可能無法顯示插件內(nèi)容鉴腻。這也是object標(biāo)簽的缺陷迷扇。
三、object與embed搭配實(shí)現(xiàn)瀏覽器兼容
從上述的內(nèi)容可以看出爽哎，單獨(dú)使用embed標(biāo)簽或object標(biāo)簽蜓席，會(huì)出現(xiàn)各種瀏覽器不兼容的問題。因此课锌，在實(shí)際開發(fā)中厨内，我們一般將object和embed標(biāo)簽組合使用，從而解決瀏覽器兼容問題产镐。那么隘庄，如何組合使用呢踢步？我們知道癣亚，object標(biāo)簽在瀏覽器無法加載插件的情況下，會(huì)執(zhí)行位于<object></object>之間的代碼获印；那么我們可以在<object></object>之間添加一個(gè)embed標(biāo)簽述雾，那么瀏覽器在無法使用object加載插件時(shí)，就會(huì)使用object標(biāo)簽內(nèi)的embed標(biāo)簽來加載插件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>embed使用測試</title>
</head>
<body>
<h2 style="margin-bottom: 10px;">《都挺好》</h2>
<p style="margin: 0 15px;">
<object style="margin-left: 15px;" width="550" height="400" data="http://vt1.doubanio.com/201903171832/4d87aa3b5678667ac04d415e2e55369b/view/movie/M/402430855.mp4" align="right">
<embed style="margin-left: 15px;" width="550" height="400" src="http://vt1.doubanio.com/201903171832/4d87aa3b5678667ac04d415e2e55369b/view/movie/M/402430855.mp4" align="right" />
</object>
<span style="line-height: 25px; text-align: justify;">表面上無限風(fēng)光的蘇家兼丰，隨著蘇母的突然離世玻孟，瞬間分崩離析。意想不到的隱患層層顯露鳍征，對(duì)毫無主見卻又自私黍翎、小氣的蘇父的安置和后續(xù)生活問題，打破了遠(yuǎn)在國外的大哥與本城的二哥 艳丛、小妹三家的平靜生活匣掸。父親蘇大強(qiáng)終于擺脫了妻子的鐵腕，對(duì)幾個(gè)孩子變本加厲氮双，不斷提出過分要求碰酝。在美國工作的老大蘇明哲回到國內(nèi)，一心要挑起家庭重?fù)?dān)戴差，卻力不能及不堪重負(fù)送爸，致使妻子孩子與其不斷疏遠(yuǎn)。一直啃老的老二蘇明成毫無悔改之心暖释，貪慕虛榮一心發(fā)財(cái)袭厂，從而導(dǎo)致事業(yè)和家庭的雙重慘敗。最不受父母待見球匕，十八歲起就和家里斷絕經(jīng)濟(jì)往來的老小蘇明玉纹磺，曾發(fā)誓與這個(gè)家庭劃清界限，卻因親情牽絆谐丢，再次攪進(jìn)了蘇家的泥潭之中爽航，在蘇家的一次次危機(jī)中出手相助蚓让。最終，蘇家人明白到讥珍，雖然有血脈相連历极，但是一家人彼此間的溝通也不能忽視，終于實(shí)現(xiàn)了親情的回歸衷佃。</span>
</p>
</body>
</html>
這樣趟卸，就能實(shí)現(xiàn)瀏覽器兼容了！
注：在IE瀏覽器下氏义，如果出現(xiàn)無法顯示插件內(nèi)容锄列，且控制臺(tái)出現(xiàn)“DOM7011:此頁上的代碼禁用了反向和正向緩存”的警告，需要檢查一下系統(tǒng)盤是否空間不足惯悠，清理磁盤空間邻邮，以保證有足夠的緩存空間加載插件內(nèi)容。
