復(fù)雜的javascript窗口分幀解析
什么是窗口分幀?
窗口分幀就是把一個(gè)瀏覽器文檔窗口分隔成多個(gè)窗口,每個(gè)窗口都可以顯示一個(gè)獨(dú)立的網(wǎng)頁(yè)文件,每個(gè)幀(即頁(yè)面)都有自己的url。
幀窗口該如何創(chuàng)建?
幀通常是由<frameset>和<frame>標(biāo)記創(chuàng)建的。但在HTML 4中,<iframe>標(biāo)記也可以用來(lái)在文檔中創(chuàng)建“內(nèi)聯(lián)幀”。就JavaScript來(lái)說(shuō),<iframe>創(chuàng)建的幀與<frameset>和<frame>創(chuàng)建的幀一樣。
在HTML中用<frameset>(分割窗口標(biāo)記)來(lái)分割窗口,<frameset>在多窗口頁(yè)面中的地位就相當(dāng) 于<body>在普通單窗口頁(yè)面中的地位,在頁(yè)面中用<frameset>……</frameset>標(biāo)志頁(yè)面主體 部分的起止位置。而且,<frameset>標(biāo)記決定了怎樣劃分窗口,以及每個(gè)窗口的位置和大小。其基本語(yǔ)法結(jié)構(gòu)如下:
<frameset cols=n rows=n frameborder=yes|no border=n bordercolor=#n framespacing=n></frameset>
cols和rows:是決定頁(yè)面如何分割的兩個(gè)參數(shù)。分割左右窗口用cols,各幀的左右寬度用占窗口寬度的百分比來(lái)表示。比 如:cols="30%,40%,*"就表示水平方向分割成三個(gè)窗口,各自所占總寬度的百分比依次是30%,40%和30%。其中"*"表示剩余部分,也 就是說(shuō)"*"對(duì)應(yīng)的小窗口寬度為剩余的寬度。分割上下窗口用rows,同樣采用百分比的設(shè)定方法。
frameborder:是指定各分窗口是(ye)否(no)要加邊框;如果加過(guò)框的話(huà),則用 border參數(shù)指定邊框的寬度,bordercolor指定邊框的顏色。
framespacing:用于設(shè)定各分窗口之間的間隔大小,默認(rèn)值是0。
用<frameset>標(biāo)記把窗口分割好后,各窗口的屬性是用HTML的<frame>標(biāo)記來(lái)定義的,所以<frameset>標(biāo)記中必須包含<frame>標(biāo)記,用以定義各分窗口的屬性。其語(yǔ)法如下:
<frame align=left|center|right|top|bottomv name=framename src=url noresize scrolling=y(tǒng)es|on|auto frameborder=yes|no bordercolor=#n marginheight=n marginwidth=n></frame>
align:設(shè)定分窗口的位置是靠左(left)、靠右(right)、居中(center)、靠上(top)還是靠底(bottom)。
name:用于指定分窗口的名稱(chēng),src則用于指定分窗口所對(duì)應(yīng)的HTML頁(yè)面地址。
noresize:是對(duì)用戶(hù)來(lái)說(shuō)的,當(dāng)<frame>標(biāo)記中包含此參數(shù)的時(shí)候,用戶(hù)就不能用鼠標(biāo)調(diào)整修改各分窗口的大小。
scrolling:設(shè)定分窗口是否要滾動(dòng)條。scrolling=no時(shí)不要滾動(dòng)條,scrolling=y(tǒng)es時(shí)表示要滾動(dòng)條,scrolling=auoto時(shí)表示根據(jù)實(shí)際情況自動(dòng)設(shè)置滾動(dòng)條。
frameborder和bordercolor:是設(shè)定分窗口有無(wú)邊框和邊框顏色的。但對(duì)象只限于用<frame>標(biāo)記的分窗口。
marginheight和marginwidth:分別用于設(shè)定分窗口的上下邊緣和左右邊緣的寬度。
例如:
<frameset cols="50%,*,25%"> <frame src="http://www.baidu.com" noresize="noresize" /> <frame src="http://www.baidu.com" /> <frame src="http://www.baidu.com" /> </frameset>
JavaScript中幀窗口之間的關(guān)系?
一個(gè)窗口的任何幀可以通過(guò)top,frames和parent屬性來(lái)引用其他幀。
任何窗口或幀中的JavaScript代碼可以將自己的窗口和幀引用為 window 或 self。
每個(gè)窗口都有frames屬性。這個(gè)屬性引用一個(gè)Window對(duì)象的數(shù)組,其中每個(gè)元素代表的是這個(gè)窗口中包含的幀(如果一個(gè)窗口沒(méi)有任何幀,那么frames[]數(shù)組就是空的,frames.length為0).這樣,窗口就可以使用frames[0]來(lái)引用它的第一個(gè)幀,使用frames[1]來(lái)引用第二個(gè)幀,一次類(lèi)推。
每個(gè)窗口還包含有一個(gè)parent屬性,它引用包含這個(gè)窗口的Window對(duì)象。這樣,窗口中的第一個(gè)幀就可以引用它的兄弟幀,即:
parent.frames[1]
如果一個(gè)窗口是頂級(jí)窗口,而不是幀,那么parent屬性引用的就是這個(gè)窗口本身:
parent==self;
如果一個(gè)幀包含在另一個(gè)幀中,而后者又包含在頂級(jí)窗口中,那么該幀就可以使用parent.parent來(lái)引用頂級(jí)窗口。
注意事項(xiàng):
分幀不能和body標(biāo)簽及內(nèi)容體共存
分幀不利于搜索引擎優(yōu)化,正常前臺(tái)頁(yè)面不建議使用分幀。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- nodejs實(shí)現(xiàn)截取上傳視頻中一幀作為預(yù)覽圖片
- javascript幀動(dòng)畫(huà)(實(shí)例講解)
- 詳解關(guān)于JSON.parse()和JSON.stringify()的性能小測(cè)試
- JS使用JSON.parse(),JSON.stringify()實(shí)現(xiàn)對(duì)對(duì)象的深拷貝功能分析
- 使用JS和canvas實(shí)現(xiàn)gif動(dòng)圖的停止和播放代碼
- 關(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
- js獲取 gif 的幀數(shù)的代碼實(shí)例
相關(guān)文章
利用d3.js制作連線(xiàn)動(dòng)畫(huà)圖與編輯器的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于如何利用d3.js制作連線(xiàn)動(dòng)畫(huà)圖與編輯器的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用d3.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Bootstrap 模態(tài)對(duì)話(huà)框只加載一次 remote 數(shù)據(jù)的完美解決辦法
前端框架 Bootstrap 的模態(tài)對(duì)話(huà)框,可以使用 remote 選項(xiàng)指定一個(gè) URL,這樣對(duì)話(huà)框在第一次彈出的時(shí)候就會(huì)自動(dòng)從這個(gè)地址加載數(shù)據(jù)到 .modal-body 中,但是它只會(huì)加載一次,不過(guò)通過(guò)在事件中調(diào)用 removeData() 方法可以解決這個(gè)問(wèn)題,具體操作方法,大家通過(guò)本文了解下吧2017-07-07javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了javascript獲取ckeditor編輯器的值,用于表單驗(yàn)證。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11two.js之實(shí)現(xiàn)動(dòng)畫(huà)效果示例
本篇文章主要介紹了two.js之實(shí)現(xiàn)動(dòng)畫(huà)效果示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11