專利名稱：在瀏覽器中顯示網(wǎng)頁的方法及在瀏覽器中顯示的網(wǎng)頁組件的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，具體涉及一種在瀏覽器上顯示網(wǎng)頁的方法及適于和媒體對(duì)象一起在瀏覽器中顯示的網(wǎng)頁組件。
背景技術(shù)：
隨著互聯(lián)網(wǎng)的快速發(fā)展，網(wǎng)絡(luò)已經(jīng)深刻地影響人類生活的各個(gè)方面。瀏覽器作為一種最為普通的網(wǎng)絡(luò)應(yīng)用，已經(jīng)為絕大多數(shù)網(wǎng)絡(luò)用戶采用。瀏覽器適于在網(wǎng)絡(luò)客戶端處呈現(xiàn)來自網(wǎng)絡(luò)服務(wù)器的內(nèi)容，從而使得網(wǎng)絡(luò)客戶端處的用戶參與網(wǎng)絡(luò)服務(wù)器提供的應(yīng)用中。瀏覽器通常呈現(xiàn)以HTML格式編碼的網(wǎng)絡(luò)內(nèi)容。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，在瀏覽器上呈現(xiàn)的內(nèi)容也日益豐富，為了增加HTML網(wǎng)頁的表現(xiàn)力，現(xiàn)在可以在網(wǎng)頁中嵌入各種格式的 多媒體信息。例如，Adobe公司開發(fā)的Flash可以呈現(xiàn)各種動(dòng)畫信息，經(jīng)常被插入在HTML網(wǎng)頁中，以便在瀏覽器處向網(wǎng)絡(luò)客戶端用戶呈現(xiàn)動(dòng)畫。然而在瀏覽器中呈現(xiàn)在網(wǎng)頁中的Flash等媒體對(duì)象時(shí)，F(xiàn)lash等媒體對(duì)象可能會(huì)遮擋住網(wǎng)絡(luò)頁面中的一些組件，例如可能遮擋住網(wǎng)絡(luò)頁面中的導(dǎo)航條，使得用戶在瀏覽動(dòng)畫的同時(shí)，不能進(jìn)行導(dǎo)航的操作，因此不方便用戶使用。因此需要一種可以解決諸如Flash之類的媒體對(duì)象會(huì)遮擋網(wǎng)頁中的其它必須顯示的組件的解決方案。
發(fā)明內(nèi)容
鑒于上述問題，提出了本發(fā)明以便提供一種克服上述問題或者至少部分地解決上述問題的在瀏覽器中顯示網(wǎng)頁的方法和適于與媒體對(duì)象一起在瀏覽器中顯示的網(wǎng)頁組件。依據(jù)本發(fā)明的一個(gè)方面，提供了在瀏覽器中顯示網(wǎng)頁的方法，所述網(wǎng)頁包括多個(gè)網(wǎng)頁對(duì)象，所述網(wǎng)頁對(duì)象至少包括媒體對(duì)象和要顯示在所述媒體對(duì)象之上的目標(biāo)網(wǎng)頁對(duì)象，該方法包括步驟在網(wǎng)頁對(duì)象在瀏覽器中顯示的層疊順序的方向上，在目標(biāo)網(wǎng)頁對(duì)象的下方添加窗口級(jí)別網(wǎng)頁對(duì)象，且該窗口級(jí)別網(wǎng)頁對(duì)象位于所述媒體對(duì)象的上方，以使得該網(wǎng)頁在瀏覽器中顯示時(shí)，該窗口級(jí)別網(wǎng)頁對(duì)象遮擋住所述媒體對(duì)象而不遮擋所述目標(biāo)網(wǎng)頁對(duì)象?？蛇x地，上述的瀏覽器中顯示網(wǎng)頁的方法包括步驟設(shè)置分層對(duì)象，將所述目標(biāo)網(wǎng)頁對(duì)象和窗口級(jí)別網(wǎng)頁對(duì)象包括在所述分層對(duì)象中，所述分層對(duì)象在所述定義層疊順序的方向上位于所述媒體對(duì)象的上方；根據(jù)所述目標(biāo)網(wǎng)頁對(duì)象的網(wǎng)頁屬性來設(shè)置該分層對(duì)象的網(wǎng)頁屬性，使得所述分層對(duì)象與所述目標(biāo)網(wǎng)頁對(duì)象在瀏覽器中顯示的位置和大小一致；根據(jù)所述目標(biāo)網(wǎng)頁對(duì)象的網(wǎng)頁屬性來設(shè)置所述窗口級(jí)別網(wǎng)頁對(duì)象的網(wǎng)頁屬性，使得所述目標(biāo)網(wǎng)頁對(duì)象和窗口級(jí)別網(wǎng)頁對(duì)象在瀏覽器中顯示的位置和大小一致。根據(jù)本發(fā)明的另一方面，提供了一種適于與媒體對(duì)象一起在瀏覽器中顯示的網(wǎng)頁組件，該網(wǎng)頁組件包括要顯示在所述媒體對(duì)象之上的目標(biāo)網(wǎng)頁對(duì)象；其中所述網(wǎng)頁組件具有與所述目標(biāo)網(wǎng)頁對(duì)象一致的網(wǎng)頁屬性，所述網(wǎng)頁屬性包括在瀏覽器上顯示的位置和大?。灰约按翱诩?jí)別網(wǎng)頁對(duì)象，其在瀏覽器上顯示的位置和大小的網(wǎng)頁屬性與所述目標(biāo)網(wǎng)頁對(duì)象相同，且在定位網(wǎng)頁對(duì)象在瀏覽器中顯示的層疊順序的方向上，位于所述媒體對(duì)象的上方但位于所述目標(biāo)網(wǎng)頁對(duì)象的下方。根據(jù)本發(fā)明的在瀏覽器上顯示網(wǎng)頁的方法及適于與媒體對(duì)象一起在瀏覽器中顯示的網(wǎng)頁組件，可以使得瀏覽器既能夠顯示被插入的媒體對(duì)象，又能夠顯示不想被所插入的媒體對(duì)象遮擋的組件，由此解決了媒體對(duì)象遮擋想被顯示的組件的問題，使瀏覽器在顯示的網(wǎng)頁內(nèi)容方面具有更大的自由度，可以呈現(xiàn)更為友好的用戶界面。上述說明僅是本發(fā)明技術(shù)方案的概述，為了能夠更清楚了解本發(fā)明的技術(shù)手段，而可依照說明書的內(nèi)容予以實(shí)施，并且為了讓本發(fā)明的上述和其它目的、特征和優(yōu)點(diǎn)能夠更明顯易懂，以下特舉本發(fā)明的
具體實(shí)施方式
。
通過閱讀下文優(yōu)選實(shí)施方式的詳細(xì)描述，各種其他的優(yōu)點(diǎn)和益處對(duì)于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實(shí)施方式的目的，而并不認(rèn)為是對(duì)本發(fā)明的限制。而且在整個(gè)附圖中，用相同的附圖標(biāo)記表示相同的部件。在附圖中圖I示出了根據(jù)本發(fā)明的一個(gè)實(shí)施例的在瀏覽器上顯示網(wǎng)頁的方法的一個(gè)例子的流程圖；圖2示出了根據(jù)本發(fā)明的一個(gè)實(shí)施例的包含適于與媒體對(duì)象一起在瀏覽器中顯示的網(wǎng)頁組件的網(wǎng)頁的方框示意圖。
具體實(shí)施例方式下面將參照附圖更詳細(xì)地描述本公開的示例性實(shí)施例。雖然附圖中顯示了本公開的示例性實(shí)施例，然而應(yīng)當(dāng)理解，可以以各種形式實(shí)現(xiàn)本公開而不應(yīng)被這里闡述的實(shí)施例所限制。相反，提供這些實(shí)施例是為了能夠更透徹地理解本公開，并且能夠?qū)⒈竟_的范圍完整的傳達(dá)給本領(lǐng)域的技術(shù)人員。如今，瀏覽器在其有限大小的空間上顯示的對(duì)象越來越多，不僅需要顯示網(wǎng)頁本身所包括的多個(gè)網(wǎng)頁對(duì)象，而且還經(jīng)常顯示一些插入的媒體對(duì)象，例如可以顯示各種動(dòng)畫信息的Adobe公司開發(fā)的Flash對(duì)象等，從而使瀏覽器能夠向用戶提供更加多樣的信息，但由于所述媒體對(duì)象并非原生的HTML元素，其顯示的時(shí)候可能會(huì)不遵循HTML規(guī)范，甚至有可能在其被顯示時(shí)會(huì)不恰當(dāng)?shù)卣趽踝∫恍┍緫?yīng)顯示在其上方的網(wǎng)頁對(duì)象。以被插入的媒體對(duì)象為Fla sh對(duì)象為例。當(dāng)在瀏覽器上顯示的HTML網(wǎng)頁中具有Flash對(duì)象時(shí),例如具有下面所示的代碼
<div style二"position:absolute; z-index:10;bottom:Opx;left:Opx;width:100%; height: 31px;">這個(gè)是導(dǎo)航div層</div>
< embed quality= ^hi gh^ pliiginspage=〃litti)://www. macromedia. com/go/ get f I a shp I ay er v type-^application/x-shockwave-fIash^ width二"100%〃 height二〃650', src-^movie, swf〃 >在上面的代碼中，定義了一個(gè)div層，其起一個(gè)導(dǎo)航條的作用。另外還插入了一個(gè)Flash對(duì)象。為了使用戶在瀏覽Flash對(duì)象展現(xiàn)的動(dòng)畫的同時(shí)，可以方便地進(jìn)行導(dǎo)航的操作，希望導(dǎo)航div層可以覆蓋在Flash動(dòng)畫之上,為此,對(duì)導(dǎo)航div層的z-index屬性設(shè)置了一個(gè)較大值，在上述代碼中，導(dǎo)航div層的z-index設(shè)置為10。然而，在實(shí)際的顯示過程中，由于瀏覽器對(duì)Flash對(duì)象的顯示處理等原因，F(xiàn)lash對(duì)象有可能會(huì)遮擋住網(wǎng)頁中的其他元素，包括起導(dǎo)航條作用的導(dǎo)航div層，從而使得導(dǎo)航效果無法實(shí)現(xiàn)。具體而言，F(xiàn)lash對(duì)象中決定Flash的渲染方式的參數(shù)wmode決定了 Flash對(duì)象能否被恰當(dāng)顯示。當(dāng)把Flash對(duì)象的wmode設(shè)置為"transparent (透明)〃或"opaque (半透明)〃時(shí),Flash動(dòng)畫由網(wǎng)頁渲染引擎負(fù)責(zé)渲染，此時(shí)它在瀏覽器中顯示的位置由CSS(Cascading Style Sheet，級(jí)聯(lián)樣式表)中的用來控制上下層位置關(guān)系的網(wǎng)頁屬性參數(shù)’z-index’控制，這時(shí)候Flash不會(huì)遮擋z-index值為10的導(dǎo)航div層，顯示效果正常。然而，當(dāng)參數(shù)wmode沒有被設(shè)置時(shí)，其默認(rèn)值是“window”，在這種情形下，F(xiàn)lash對(duì)象將在window窗口級(jí)別渲染，其相應(yīng)元素?fù)碛邢到y(tǒng)級(jí)的窗口句柄，它就不再遵循網(wǎng)頁屬性參數(shù)’z-index’設(shè)定的網(wǎng)頁屬性，而會(huì)處于所有未擁有窗口句柄特性的網(wǎng)頁元素之上，從而導(dǎo)致Flash對(duì)象遮擋其他本應(yīng)顯示在其上方的網(wǎng)頁對(duì)象。
為此，本發(fā)明提出的一種在瀏覽器中顯示網(wǎng)頁的方法和一種適于與媒體對(duì)象一起在瀏覽器中顯示的網(wǎng)頁組件。為了說明方便，在下面的描述中，設(shè)瀏覽器顯示網(wǎng)頁的平面為XY平面，網(wǎng)頁對(duì)象在瀏覽器中顯示的層疊順序的方向設(shè)為瀏覽器的Z軸方向。本發(fā)明提出的在瀏覽器中顯示網(wǎng)頁的方法主要是，在瀏覽器的Z軸方向上，在目標(biāo)網(wǎng)頁對(duì)象的下方添加窗口級(jí)別網(wǎng)頁對(duì)象，且該窗口級(jí)別網(wǎng)頁對(duì)象位于媒體對(duì)象的上方，以使得網(wǎng)頁在瀏覽器中顯示時(shí)，該窗口級(jí)別網(wǎng)頁對(duì)象遮擋住媒體對(duì)象而不遮擋目標(biāo)網(wǎng)頁對(duì)象。下面結(jié)合圖I具體說明根據(jù)本發(fā)明一個(gè)實(shí)施例的、適于解決上述問題的在瀏覽器中顯示網(wǎng)頁的方法100的流程圖。如圖I所示，本發(fā)明的方法100始于步驟S105，隨后，在步驟SllO中，確定不希望被媒體對(duì)象遮擋的目標(biāo)網(wǎng)頁對(duì)象。就上面的Flash示例而言，在步驟SllO中，確定不希望被Flash對(duì)象遮擋的目標(biāo)網(wǎng)頁對(duì)象，例如確定目標(biāo)網(wǎng)頁對(duì)象為一導(dǎo)航div層，該導(dǎo)航div層在HTML網(wǎng)頁中可以采用如下代碼表示〈div style-〃position :absolute ;z index : 10 ;bottom :0px ;left :0px ;width :100% ；height 31px ；" > 這個(gè)是導(dǎo)航 div 層 </div>隨后，在步驟S120中，創(chuàng)建分層對(duì)象，并且將目標(biāo)網(wǎng)頁對(duì)象包括在分層對(duì)象中，從而使分層對(duì)象處于目標(biāo)網(wǎng)頁對(duì)象的上層。分層對(duì)象可以是任何可以將各種網(wǎng)頁對(duì)象組合在一起的容器類對(duì)象，根據(jù)本發(fā)明的一個(gè)實(shí)施例，分層對(duì)象可以是div層。隨后，在步驟S130中，根據(jù)目標(biāo)網(wǎng)頁對(duì)象的網(wǎng)頁屬性來設(shè)置上述分層對(duì)象的網(wǎng)頁屬性。具體而言，為了不破壞原有網(wǎng)頁的顯示方式，將目標(biāo)網(wǎng)頁對(duì)象有關(guān)的在瀏覽器的XY平面中顯示的位置和大小等的屬性復(fù)制給分層對(duì)象，使得分層對(duì)象與目標(biāo)網(wǎng)頁對(duì)象在瀏覽器的XY平面中顯示的位置和大小一致。另外為了恰當(dāng)顯示，需要將分層對(duì)象在瀏覽器的Z軸方向上設(shè)置為位于媒體對(duì)象的上方。根據(jù)本發(fā)明的一個(gè)示例，定義的網(wǎng)頁對(duì)象在瀏覽器的Z軸方向上顯示的層疊順序的屬性值可以利用網(wǎng)頁屬性參數(shù)Z-index來設(shè)置；Z-index值越高，對(duì)象在瀏覽器的Z軸方向上就越顯示在上方；z-index值越低，對(duì)象在瀏覽器的Z軸方向上就越顯示在下方。當(dāng)然，本發(fā)明不受限于網(wǎng)頁屬性參數(shù)z-index，所有可以定義網(wǎng)頁對(duì)象在瀏覽器中顯示的層疊順序的網(wǎng)頁屬性都在本發(fā)明的保護(hù)范圍之內(nèi)。
就媒體對(duì)象為Flash而言，在步驟S120中，在導(dǎo)航div層的外層新增一 DIV層，該新增的DIV層為導(dǎo)航div層的父元素或者父層。然后，在步驟S130中，使該新增的DIV層的樣式被設(shè)置得與導(dǎo)航div層的樣式相同，而導(dǎo)航div層的樣式可以只需保留網(wǎng)頁屬性參數(shù)寬度“width”和高度“height”即可，具體可以由如下代碼表示
<div style-^display:block;width:100%; height:31px;position:absolute; z-index:10;bottom:Opx;left:Opx;">
<div style-'wicith: 100%; height :3I_px;">這個(gè)是導(dǎo)航div層</div>
</div>
由于新增的DIV層具有與導(dǎo)航div層相同的樣式，所以DIV層可以顯示導(dǎo)航div層的信息，這樣的設(shè)置提高了導(dǎo)航div層的信息在瀏覽器的Z軸方向上的顯示層次，即在瀏覽器的Z軸方向上可以顯示在更上方。隨后，在步驟S140中，添加窗口級(jí)別網(wǎng)頁對(duì)象，在瀏覽器的Z軸方向上，該窗口級(jí)別網(wǎng)頁對(duì)象在目標(biāo)網(wǎng)頁對(duì)象的下方且在媒體對(duì)象的上方，這樣當(dāng)在瀏覽器中顯示網(wǎng)頁時(shí)，該窗口級(jí)別網(wǎng)頁對(duì)象遮擋住媒體對(duì)象而不遮擋目標(biāo)網(wǎng)頁對(duì)象。應(yīng)當(dāng)注意的是，步驟S140是本發(fā)明的關(guān)鍵步驟，通過在媒體對(duì)象和目標(biāo)網(wǎng)頁對(duì)象之間添加窗口級(jí)別網(wǎng)頁對(duì)象，即使媒體對(duì)象以高級(jí)別運(yùn)行，其也會(huì)被窗口級(jí)別網(wǎng)頁對(duì)象所遮擋，而窗口級(jí)別網(wǎng)頁對(duì)象本身又屬于HTML的標(biāo)準(zhǔn)對(duì)象，自然遵循HTML定義的層疊順序，因而也會(huì)被目標(biāo)網(wǎng)頁對(duì)象所遮擋。因此，本發(fā)明通過在媒體對(duì)象和目標(biāo)網(wǎng)頁對(duì)象之間添加窗口級(jí)別網(wǎng)頁對(duì)象而解決了有關(guān)媒體對(duì)象有可能不遵循HTML定義而顯示在目標(biāo)網(wǎng)頁對(duì)象之上的問題?？蛇x地，窗口級(jí)別網(wǎng)頁對(duì)象可以為HTML規(guī)范中的iframe元素，然而根據(jù)需要，窗口級(jí)別網(wǎng)頁對(duì)象還可以是任何可以遮擋媒體對(duì)象的其他HTML元素。在步驟S140之后，可以直接進(jìn)入結(jié)束步驟S160。但是，為了讓新添加的窗口級(jí)別網(wǎng)頁對(duì)象不會(huì)干擾其他網(wǎng)頁對(duì)象的顯示，在步驟S140之后還可以進(jìn)行步驟S150，在步驟S150中，將窗口級(jí)別網(wǎng)頁對(duì)象同樣包括在步驟S120創(chuàng)建的分層對(duì)象中，并根據(jù)目標(biāo)網(wǎng)頁對(duì)象的網(wǎng)頁屬性來設(shè)置窗口級(jí)別網(wǎng)頁對(duì)象的網(wǎng)頁屬性，使得目標(biāo)網(wǎng)頁對(duì)象和窗口級(jí)別網(wǎng)頁對(duì)象在瀏覽器的XY平面內(nèi)顯示的位置和大小一致。就上面的Flash對(duì)象示例來說,在DIV層中增加一個(gè)iframe對(duì)象,該iframe對(duì)象在瀏覽器XY平面上的顯示尺寸與導(dǎo)航div層的尺寸一致，但在瀏覽器的Z軸方向上定位在Flash之上且在導(dǎo)航div層之下，具體地可以通過如下代碼來實(shí)現(xiàn)
<div style=^display:block;width:I00%; height:31px;position:absolute; z-index:10;bottom:Opx:left:Opx;〃>
<iframescrolling=〃no〃franieborder=〃0〃style=〃z-index:-I;position:
absolute;height:3ipx;width:100%;background:#FFFFFF"></iframe)
<div style^^width: 100%; height:31px; 〃>這個(gè)是導(dǎo)航div層</div>
</div>
從上述代碼中可知，iframe對(duì)象通過參數(shù)“z-index :_1”而被定位，其中“z-index :_1”表示iframe對(duì)象在新增DIV層中的位置位于導(dǎo)航div層的下面，同時(shí)由于新增DIV層具有屬性“z-index :10”，所以新增的DIV層在瀏覽器的Z軸方向上位于Flash對(duì)象之上。由此可知，DIV層可以顯示導(dǎo)航div層的信息，且最終的效果是導(dǎo)航div層的信息遮擋住iframe對(duì)象。另外，iframe可以遮擋住Flash對(duì)象,例如通過將iframe的背景設(shè)定為不透明，即設(shè)定為“background:#FFFFFF”，使得iframe能夠遮擋住Flash，由此，結(jié)合前面所述可知，導(dǎo)航div層的信息顯示在Flash對(duì)象之上，即不會(huì)被Flash對(duì)象遮擋。通過上述步驟，即使在Flash對(duì)象的顯示參數(shù)被設(shè)置為wmode= “window”時(shí),也可使可能被Flash對(duì)象所遮擋的目標(biāo)網(wǎng)頁對(duì)象顯示在Flash對(duì)象上方。需要說明的是，圖I所示的方法并不限定按所示的各步驟的順序進(jìn)行，可以根據(jù)需要調(diào)整各步驟的先后順序，另外，所述步驟也不限定于上述步驟劃分，上述步驟可以進(jìn)一步拆分成更多步驟也可以合并成更少步驟。 下面結(jié)合圖2說明根據(jù)本發(fā)明一個(gè)實(shí)施例的、適于解決上述問題的一種適于與媒體對(duì)象一起在瀏覽器中顯示的網(wǎng)頁組件200。如圖2所示，本發(fā)明的適于與媒體對(duì)象220 —起在瀏覽器中顯示的網(wǎng)頁組件200包括要顯示在所述媒體對(duì)象220之上的目標(biāo)網(wǎng)頁對(duì)象210、以及窗口級(jí)別網(wǎng)頁對(duì)象230。為了說明方便起見，圖2中還示出了網(wǎng)頁20、以及在網(wǎng)頁20中顯示的媒體對(duì)象220。其中，網(wǎng)頁組件200具有與目標(biāo)網(wǎng)頁對(duì)象210 —致的網(wǎng)頁屬性，所述網(wǎng)頁屬性包括目標(biāo)網(wǎng)頁對(duì)象210在瀏覽器的XY平面上顯示的位置和大小。由于網(wǎng)頁組件200在目標(biāo)網(wǎng)頁對(duì)象210的上層且與目標(biāo)網(wǎng)頁對(duì)象210具有一致的網(wǎng)頁屬性，所以，目標(biāo)網(wǎng)頁對(duì)象210的內(nèi)容在瀏覽器上的顯示轉(zhuǎn)換為由網(wǎng)頁組件200代為顯示。這里，網(wǎng)頁組件200可以是任何可以將各種網(wǎng)頁對(duì)象組合在一起的容器類對(duì)象，根據(jù)本發(fā)明的一個(gè)實(shí)施例，網(wǎng)頁組件200可以是div層。另外，為了恰當(dāng)顯示，需要將網(wǎng)頁組件200在瀏覽器的Z軸方向上設(shè)置為位于媒體對(duì)象220的上方。根據(jù)本發(fā)明的一個(gè)不例，定義在瀏覽器的Z軸方向上的顯不層疊順序的屬性值可以利用網(wǎng)頁屬性參數(shù)z-index來設(shè)置；Z-indeX值越高，對(duì)象在瀏覽器的Z軸方向上就越顯示在上方；z_index值越低,對(duì)象在瀏覽器的Z軸方向上就越顯示在下方。當(dāng)然，本發(fā)明不受限于網(wǎng)頁屬性參數(shù)z-index，所有可以定義網(wǎng)頁對(duì)象在瀏覽器的Z軸方向上顯示的層疊順序的網(wǎng)頁屬性都在本發(fā)明的保護(hù)范圍之內(nèi)。以媒體對(duì)象220為Flash對(duì)象而言，以在瀏覽器XY平面中顯示的導(dǎo)航div層作為目標(biāo)網(wǎng)頁對(duì)象210，希望Flash對(duì)象220在瀏覽器XY平面中顯示時(shí)不遮擋導(dǎo)航div層210。為此，本發(fā)明提供的網(wǎng)頁組件200設(shè)置為導(dǎo)航div層210的父元素或者父層，其為位于導(dǎo)航div層210的外層的一 DIV層200，該DIV層200的樣式被設(shè)置得與導(dǎo)航div層210的樣式相同，而導(dǎo)航div層210的樣式可以只需保留網(wǎng)頁屬性參數(shù)寬度“width”和高度“height”
即可，具體可以由如下代碼表示
<div style="display:block;width:100%; height:3Ipx!position:absolute; z-index:10;bottom:Opx;left:Opx;w>
<div style=/,width: 100%; height:3ipx; 〃>這個(gè)是導(dǎo)航div層</div>
</div>
由于DIV層200具有與導(dǎo)航div層210相同的樣式，所以DIV層200可以顯示所述導(dǎo)航div層210的信息，這樣的設(shè)置提高了導(dǎo)航div層的信息在瀏覽器的Z軸方向上的顯示層次，即在瀏覽器的Z軸方向上可以顯示在更上方在圖2所示的網(wǎng)頁組件200中，窗口級(jí)別網(wǎng)頁對(duì)象230在瀏覽器的Z軸方向上位于媒體對(duì)象220的上方但位于目標(biāo)網(wǎng)頁對(duì)象210的下方，而且在瀏覽器XY平面上顯示的位置和大小的網(wǎng)頁屬性與目標(biāo)網(wǎng)頁對(duì)象210的相同。這樣，當(dāng)在瀏覽器中顯示網(wǎng)頁時(shí)，由于網(wǎng)頁組件200位于窗口級(jí)別網(wǎng)頁對(duì)象230的上層，而窗口級(jí)別網(wǎng)頁對(duì)象230又位于媒體對(duì)象220的上方，所以網(wǎng)頁組件200位于媒體對(duì)象220的上方。而根據(jù)前面所述，網(wǎng)頁組件200又能夠顯示目標(biāo)網(wǎng)頁對(duì)象210的內(nèi)容，所以目標(biāo)網(wǎng)頁對(duì)象210的內(nèi)容在瀏覽器上顯示時(shí)不會(huì)被媒體對(duì)象220遮擋。本發(fā)明的網(wǎng)頁組件200由于包含在瀏覽器的Z軸方向上設(shè)置在媒體對(duì)象220和目標(biāo)網(wǎng)頁對(duì)象210之間的窗口級(jí)別網(wǎng)頁對(duì)象230，所以，即使媒體對(duì)象220以高級(jí)別運(yùn)行，其也會(huì)被窗口級(jí)別網(wǎng)頁對(duì)象230所遮擋，而窗口級(jí)別網(wǎng)頁對(duì)象230本身又屬于HTML的標(biāo)準(zhǔn)對(duì)象，自然遵循HTML定義的層疊順序，因而也會(huì)被目標(biāo)網(wǎng)頁對(duì)象210所遮擋。因此，本發(fā)明通 過在媒體對(duì)象220和目標(biāo)網(wǎng)頁對(duì)象210之間設(shè)置窗口級(jí)別網(wǎng)頁對(duì)象230而解決了有關(guān)媒體對(duì)象220有可能不遵循HTML定義而顯示在目標(biāo)網(wǎng)頁對(duì)象210之上的問題?？蛇x地，窗口級(jí)別網(wǎng)頁對(duì)象230可以由iframe對(duì)象來實(shí)現(xiàn)，媒體對(duì)象220可以為Flash對(duì)象。可選地，網(wǎng)頁組件200、媒體對(duì)象220、窗口級(jí)別網(wǎng)頁對(duì)象230、以及目標(biāo)網(wǎng)頁對(duì)象210在瀏覽器Z軸上的層疊順序可以由表示在瀏覽器Z軸上的層疊順序的網(wǎng)頁屬性參數(shù)z-index來設(shè)置。另外，可選地，可以將所述窗口級(jí)別網(wǎng)頁對(duì)象230的網(wǎng)頁屬性設(shè)置為不透明，這樣可以使得窗口級(jí)別網(wǎng)頁對(duì)象230能夠更完全地遮擋住媒體對(duì)象220。想要特別說明的是，在此提供的算法和顯示不與任何特定計(jì)算機(jī)、虛擬系統(tǒng)或者其它設(shè)備固有相關(guān)。各種通用系統(tǒng)也可以與基于在此的示教一起使用。根據(jù)上面的描述，構(gòu)造這類系統(tǒng)所要求的結(jié)構(gòu)是顯而易見的。此外，本發(fā)明也不針對(duì)任何特定編程語言。應(yīng)當(dāng)明白，可以利用各種編程語言實(shí)現(xiàn)在此描述的本發(fā)明的內(nèi)容，并且上面對(duì)特定語言所做的描述是為了披露本發(fā)明的最佳實(shí)施方式。在此處所提供的說明書中，說明了大量具體細(xì)節(jié)。然而，能夠理解，本發(fā)明的實(shí)施例可以在沒有這些具體細(xì)節(jié)的情況下實(shí)踐。在一些實(shí)例中，并未詳細(xì)示出公知的方法、結(jié)構(gòu)和技術(shù)，以便不模糊對(duì)本說明書的理解。類似地，應(yīng)當(dāng)理解，為了精簡(jiǎn)本公開并幫助理解各個(gè)發(fā)明方面中的一個(gè)或多個(gè)，在上面對(duì)本發(fā)明的示例性實(shí)施例的描述中，本發(fā)明的各個(gè)特征有時(shí)被一起分組到單個(gè)實(shí)施例、圖、或者對(duì)其的描述中。然而，并不應(yīng)將該公開的方法解釋成反映如下意圖即所要求保護(hù)的本發(fā)明要求比在每個(gè)權(quán)利要求中所明確記載的特征更多的特征。更確切地說，如下面的權(quán)利要求書所反映的那樣，發(fā)明方面在于少于前面公開的單個(gè)實(shí)施例的所有特征。因此，遵循
具體實(shí)施方式
的權(quán)利要求書由此明確地并入該
具體實(shí)施方式
，其中每個(gè)權(quán)利要求本身都作為本發(fā)明的單獨(dú)實(shí)施例。本領(lǐng)域那些技術(shù)人員可以理解，可以對(duì)實(shí)施例中的設(shè)備中的模塊進(jìn)行自適應(yīng)性地改變并且把它們?cè)O(shè)置在與該實(shí)施例不同的一個(gè)或多個(gè)設(shè)備中?？梢园褜?shí)施例中的模塊或單元或組件組合成一個(gè)模塊或單元或組件，以及此外可以把它們分成多個(gè)子模塊或子單元或子組件。除了這樣的特征和/或過程或者單元中的至少一些是相互排斥之外，可以采用任何組合對(duì)本說明書(包括伴隨的權(quán)利要求、摘要和附圖)中公開的所有特征以及如此公開的任何方法或者設(shè)備的所有過程或單元進(jìn)行組合。除非另外明確陳述，本說明書(包括伴隨的權(quán)利要求、摘要和附圖)中公開的每個(gè)特征可以由提供相同、等同或相似目的的替代特征來代替。此外，本領(lǐng)域的技術(shù)人員能夠理解，盡管在此所述的一些實(shí)施例包括其它實(shí)施例中所包括的某些特征而不是其它特征，但是不同實(shí)施例的特征的組合意味著處于本發(fā)明的范圍之內(nèi)并且形成不同的實(shí)施例。例如，在下面的權(quán)利要求書中，所要求保護(hù)的實(shí)施例的任意之一都可以以任意的組合方式來使用。本發(fā)明的各個(gè)部件實(shí)施例可以以硬件實(shí)現(xiàn)，或者以在一個(gè)或者多個(gè)處理器上運(yùn)行的軟件模塊實(shí)現(xiàn)，或者以它們的組合實(shí)現(xiàn)。本領(lǐng)域的技術(shù)人員應(yīng)當(dāng)理解，可以在實(shí)踐中使用 微處理器或者數(shù)字信號(hào)處理器(DSP)來實(shí)現(xiàn)根據(jù)本發(fā)明實(shí)施例的一些或者全部部件的一些或者全部功能。本發(fā)明還可以實(shí)現(xiàn)為用于執(zhí)行這里所描述的方法的一部分或者全部的設(shè)備或者裝置程序(例如，計(jì)算機(jī)程序和計(jì)算機(jī)程序產(chǎn)品)。這樣的實(shí)現(xiàn)本發(fā)明的程序可以存儲(chǔ)在計(jì)算機(jī)可讀介質(zhì)上，或者可以具有一個(gè)或者多個(gè)信號(hào)的形式。這樣的信號(hào)可以從因特網(wǎng)網(wǎng)站上下載得到，或者在載體信號(hào)上提供，或者以任何其他形式提供。應(yīng)該注意的是上述實(shí)施例對(duì)本發(fā)明進(jìn)行說明而不是對(duì)本發(fā)明進(jìn)行限制，并且本領(lǐng)域技術(shù)人員在不脫離所附權(quán)利要求的范圍的情況下可設(shè)計(jì)出替換實(shí)施例。在權(quán)利要求中，不應(yīng)將位于括號(hào)之間的任何參考符號(hào)構(gòu)造成對(duì)權(quán)利要求的限制。單詞“包含”不排除存在未列在權(quán)利要求中的元件或步驟。位于元件之前的單詞“一”或“一個(gè)”不排除存在多個(gè)這樣的元件。本發(fā)明可以借助于包括有若干不同元件的硬件以及借助于適當(dāng)編程的計(jì)算機(jī)來實(shí)現(xiàn)。在列舉了若干裝置的單元權(quán)利要求中，這些裝置中的若干個(gè)可以是通過同一個(gè)硬件項(xiàng)來具體體現(xiàn)。單詞第一、第二、以及第三等的使用不表示任何順序?？蓪⑦@些單詞解釋為名稱。
權(quán)利要求
1.一種在瀏覽器中顯示網(wǎng)頁的方法，所述網(wǎng)頁包括多個(gè)網(wǎng)頁對(duì)象，所述網(wǎng)頁對(duì)象至少包括媒體對(duì)象和要顯示在所述媒體對(duì)象之上的目標(biāo)網(wǎng)頁對(duì)象，該方法包括步驟 在網(wǎng)頁對(duì)象在瀏覽器中顯示的層疊順序的方向上，在目標(biāo)網(wǎng)頁對(duì)象的下方添加窗口級(jí)別網(wǎng)頁對(duì)象，且該窗口級(jí)別網(wǎng)頁對(duì)象位于所述媒體對(duì)象的上方，以使得該網(wǎng)頁在瀏覽器中顯示時(shí)，該窗口級(jí)別網(wǎng)頁對(duì)象遮擋住所述媒體對(duì)象而不遮擋所述目標(biāo)網(wǎng)頁對(duì)象。
2.根據(jù)權(quán)利要求I所述的方法，所述添加窗口級(jí)別網(wǎng)頁對(duì)象的步驟包括步驟 設(shè)置分層對(duì)象，將所述目標(biāo)網(wǎng)頁對(duì)象和窗口級(jí)別網(wǎng)頁對(duì)象包括在所述分層對(duì)象中，所述分層對(duì)象在所述定義層疊順序的方向上位于所述媒體對(duì)象的上方； 根據(jù)所述目標(biāo)網(wǎng)頁對(duì)象的網(wǎng)頁屬性來設(shè)置該分層對(duì)象的網(wǎng)頁屬性，使得所述分層對(duì)象與所述目標(biāo)網(wǎng)頁對(duì)象在瀏覽器中顯示的位置和大小一致； 根據(jù)所述目標(biāo)網(wǎng)頁對(duì)象的網(wǎng)頁屬性來設(shè)置所述窗口級(jí)別網(wǎng)頁對(duì)象的網(wǎng)頁屬性，使得所述目標(biāo)網(wǎng)頁對(duì)象和窗口級(jí)別網(wǎng)頁對(duì)象在瀏覽器中顯示的位置和大小一致。
3.如權(quán)利要求I或者2所述的方法，其中所述窗口級(jí)別網(wǎng)頁對(duì)象為iframe對(duì)象，所述分層對(duì)象為div對(duì)象。
4.如權(quán)利要求1-3中任一項(xiàng)所述的方法，其中所述媒體對(duì)象為Flash對(duì)象。
5.如權(quán)利要求1-4中任一項(xiàng)所述的方法，其中所述窗口級(jí)別網(wǎng)頁對(duì)象被設(shè)置為不透明。
6.如權(quán)利要求1-5中任一項(xiàng)所述的方法，其中所述媒體對(duì)象、分層對(duì)象、窗口級(jí)別網(wǎng)頁對(duì)象以及目標(biāo)網(wǎng)頁對(duì)象的層疊順序根據(jù)表示該層疊順序的網(wǎng)頁屬性參數(shù)z-index來設(shè)置。
7.一種適于與媒體對(duì)象一起在瀏覽器中顯示的網(wǎng)頁組件，所述網(wǎng)頁組件包括 要顯示在所述媒體對(duì)象之上的目標(biāo)網(wǎng)頁對(duì)象，其中所述網(wǎng)頁組件具有與所述目標(biāo)網(wǎng)頁對(duì)象一致的網(wǎng)頁屬性，所述網(wǎng)頁屬性包括在瀏覽器上顯示的位置和大小；以及 窗口級(jí)別網(wǎng)頁對(duì)象，其在瀏覽器上顯示的位置和大小的網(wǎng)頁屬性與所述目標(biāo)網(wǎng)頁對(duì)象相同，且在定位網(wǎng)頁對(duì)象在瀏覽器中顯示的層疊順序的方向上，位于所述媒體對(duì)象的上方但位于所述目標(biāo)網(wǎng)頁對(duì)象的下方。
8.根據(jù)權(quán)利要求7所述的網(wǎng)頁組件，其中所述窗口級(jí)別網(wǎng)頁對(duì)象為iframe對(duì)象，所述媒體對(duì)象為Flash對(duì)象，且所述網(wǎng)頁組件為div組件。
9.根據(jù)權(quán)利要求7或8所述的網(wǎng)頁組件，其與所述媒體對(duì)象、窗口級(jí)別網(wǎng)頁對(duì)象、以及目標(biāo)網(wǎng)頁對(duì)象的在瀏覽器中顯示時(shí)的層疊順序根據(jù)表示該層疊順序的網(wǎng)頁屬性參數(shù)z-index來設(shè)置。
10.根據(jù)權(quán)利要求7-9中任一項(xiàng)所述的網(wǎng)頁組件，其中所述窗口級(jí)別網(wǎng)頁對(duì)象為不透明。
全文摘要
本發(fā)明公開了一種在瀏覽器中顯示網(wǎng)頁的方法，所述網(wǎng)頁包括多個(gè)網(wǎng)頁對(duì)象，所述網(wǎng)頁對(duì)象至少包括媒體對(duì)象和要顯示在所述媒體對(duì)象之上的目標(biāo)網(wǎng)頁對(duì)象，該方法包括步驟在網(wǎng)頁對(duì)象在瀏覽器中顯示的層疊順序的方向上，在目標(biāo)網(wǎng)頁對(duì)象的下方添加窗口級(jí)別網(wǎng)頁對(duì)象，且該窗口級(jí)別網(wǎng)頁對(duì)象位于所述媒體對(duì)象的上方，以使得該網(wǎng)頁在瀏覽器中顯示時(shí)，該窗口級(jí)別網(wǎng)頁對(duì)象遮擋住所述媒體對(duì)象而不遮擋所述目標(biāo)網(wǎng)頁對(duì)象。另外，本發(fā)明還提供一種適于與媒體對(duì)象一起在瀏覽器中顯示的網(wǎng)頁組件。利用本發(fā)明，可以使得瀏覽器既能夠顯示被插入的媒體對(duì)象，又能夠顯示不想被所插入的媒體對(duì)象遮擋的組件，提高了用戶界面友好度。
文檔編號(hào)G06F17/30GK102915349SQ201210366388
公開日2013年2月6日 申請(qǐng)日期2012年9月27日 優(yōu)先權(quán)日2012年9月27日
發(fā)明者黃歡 申請(qǐng)人:北京奇虎科技有限公司, 奇智軟件(北京)有限公司