html Frame、Iframe、Frameset 的區(qū)別

10.4.1 Frameset與Frame的區(qū)別
首先講解Frameset與Frame之間的區(qū)別。
<Frameset></Frameset>用來劃分框架,每一個(gè)框架由<Frame></Frame>標(biāo)記。<Frame></Frame>必須在<Frameset></Frameset>之內(nèi)使用,代碼如下:
<FRAMESET border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>
<FRAME src="inc/admin_left.htm" name=left scrolling=no id="left">
<FRAME src="inc/admin_center.htm" name=main scrolling="no">
</FRAMESET>
在上面的例子當(dāng)中,<Frameset></Frameset>把頁面分為左右兩個(gè)部分,左側(cè)框架中的頁面是admin_left.htm,右側(cè)框架中的頁面是admin_center.htm。
注意:<Frame></Frame>標(biāo)記的框架順序?yàn)閺淖笾劣一驈纳系较隆?/P>
兩者的差別如下:
● <Frameset>為框架標(biāo)記,說明該網(wǎng)頁文檔為框架組成,并設(shè)定文檔中組成框架集的框架的布局。
● <Frame>用以設(shè)置組成框架集中各個(gè)框架的屬性。
10.4.2 Frameset參數(shù)設(shè)置
<Frameset>需要設(shè)置一些特定的參數(shù),這些參數(shù)直接決定了整個(gè)頁面的布局,代碼如下:
<Frameset border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>
關(guān)于上段代碼的各項(xiàng)參數(shù)設(shè)置及其含義如表10.3所示。
表10.3 Frameset參數(shù)
參 數(shù) |
說 明 |
Border |
設(shè)定框架的邊框厚度,以pixels為單位 |
frameborder |
設(shè)定是否顯示框架的邊框,0為不顯示,1為顯示 |
FrameSpacing |
表示框架與框架之間的距離 |
BorderColor |
設(shè)定框架的邊框顏色 |
Row |
將文檔分為上下的框架,Row后的值可以為數(shù)值或百分?jǐn)?shù),*表示占用余下的空間,數(shù)值的個(gè)數(shù)代表水平分成的框架個(gè)數(shù),例如Rows=“210,*,10%”,表示頁面分為上中下三個(gè)框架頁,上邊的框架占用210px,下邊的框架占用整個(gè)文檔的10%,余下的空間為中間的框架占用。*是一個(gè)相對(duì)的概念,例如Row=*,表示頁面中沒有上下結(jié)構(gòu)的框架布局 |
Cols |
設(shè)置同Row |
10.4.3 Frame參數(shù)設(shè)置
關(guān)于Frame參數(shù)的設(shè)置,代碼如下:
如表10.4所示。
表10.4 Frame參數(shù)
參 數(shù) |
說 明 |
Name |
設(shè)定框架的名稱,須為英文 |
Src |
設(shè)置框架中顯示的頁面路徑和名稱,可為相對(duì)路徑亦可為絕對(duì)路徑 |
Marginwidth |
表示框架距離左右邊緣的距離 |
Marginheight |
表示框架距離上下邊緣的距離 |
Scrollling |
設(shè)置是否在框架中顯示滾動(dòng)條,yes為顯示,no為不顯示,auto表示當(dāng)框架頁中內(nèi)容超過框架的大小時(shí)自動(dòng)顯示滾動(dòng)條 |
Frameborder |
設(shè)置是否顯示框架的邊框,0為不顯示,1為顯示 |
Noresize |
設(shè)定是否可以讓使用者改變這個(gè)框架的大小,不設(shè)置此項(xiàng)可以讓瀏覽者任意拉動(dòng)框架,改變框架的大小 |
Framespacing |
表示框架與框架之間的距離 |
Bordercolor |
設(shè)定框架的邊框顏色 |
10.4.4 Frame與Iframe的區(qū)別
Frame與Iframe兩者可以實(shí)現(xiàn)的功能基本相同,不過Iframe比Frame具有更多的靈活性。
Iframe標(biāo)記又叫浮動(dòng)幀標(biāo)記,可以用它將一個(gè)HTML文檔嵌入在一個(gè)HTML中顯示。它和Frame標(biāo)記的最大區(qū)別是在網(wǎng)頁中嵌入的<Iframe></Iframe>所包含的內(nèi)容與整個(gè)頁面是一個(gè)整體,而<Frame></Frame>所包含的內(nèi)容是一個(gè)獨(dú)立的個(gè)體,是可以獨(dú)立顯示的。另外,應(yīng)用Iframe還可以在同一個(gè)頁面中多次顯示同一內(nèi)容,而不必重復(fù)這段內(nèi)容的代碼。
如圖10.21所示的頁面就是應(yīng)用Iframe在頁面上下各創(chuàng)建了分頁的鏈接,上下的代碼是一樣的,只需在網(wǎng)頁中嵌入同一個(gè)文件即可,不需要重復(fù)代碼的編寫,本案例的實(shí)際效果參看配書光盤中的案例/frame/iframe/see_infomore_iframe.htm。
10.4.5 設(shè)置Iframe透明
Iframe還有一個(gè)更大的好處,就是可以設(shè)置框架透明,讓框架內(nèi)的背景和主頁面背景一樣。在上例操作中,細(xì)心的讀者會(huì)發(fā)現(xiàn)這個(gè)問題,下面來詳細(xì)說明如何設(shè)置Iframe透明。具體操作步驟如下:
(1)打開配書光盤中的案例/frame/iframe/see_infomore_iframe1.htm。
(2)在瀏覽器中瀏覽該頁文件,發(fā)現(xiàn)在插入Iframe的區(qū)域?qū)⒃瓉韱卧竦谋尘案采w了,這不是想要的效果。
(3)打開page.htm頁面,切換到代碼視圖,在<body>標(biāo)記中插入代碼如下:
<body style="background-color=transparent">
圖10.21 應(yīng)用Iframe創(chuàng)建翻頁
(4)切換see_infomore_iframe1.htm到代碼視圖,查看頁面插入Iframe的單元格的代碼如下:
<td height="30" colspan="4" >
<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm"></iframe>
</td>
(5)在<Iframe>標(biāo)記中,
<frame name="left" src=" index_manager/admin_left.htm " marginwidth="1" marginheight="1" scrolling="no" frameborder="1" noresize framespacing="2" bordercolor="#cc0000">
上段代碼的各項(xiàng)參數(shù)設(shè)置及其含義
allowTransparency="true"
(6)此時(shí)插入Iframe的單元格代碼如下:
<td height="30" colspan="4" >
<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm" allowTransparency="true"></iframe></td>
(7)保存page.htm和see_infomore_iframe1.htm兩個(gè)頁面,在瀏覽器中瀏覽效果。
相關(guān)文章
HTML5 window/iframe跨域傳遞消息 API介紹
window.postMessage允許多個(gè) window/frame之間跨域傳遞數(shù)據(jù)和信息。下面為大家介紹下window.postMessage的工作原理,以及如何在FireFox,IE8+,Opera,Safari和Chrome中使用2013-08-26html中iframe控制父頁面刷新實(shí)現(xiàn)思路及代碼
正如標(biāo)題所言具體的實(shí)現(xiàn)思路為在b頁面中找到a頁面,然后找到a頁面里的iframe,重新對(duì)iframe的src屬性進(jìn)行賦值,下面以實(shí)例的方式為大家介紹下,感興趣的朋友可以參考下哈2013-07-08HTML網(wǎng)頁制作教程 謹(jǐn)慎使用iframe標(biāo)記
使用 iframe 可以輕易的調(diào)用其他網(wǎng)站的頁面,但應(yīng)謹(jǐn)慎使用。它比創(chuàng)建其他 DOM 元素(包括 style 和 script)多耗費(fèi)數(shù)十甚至數(shù)百倍的性能。增加100個(gè)不同元素的時(shí)間對(duì)比顯示2009-08-19- iframe是框架的一種形式,也比較常用到。2009-04-23
HTML阻止iframe跳轉(zhuǎn)頁面并使用iframe在頁面內(nèi)嵌微信網(wǎng)頁版的實(shí)現(xiàn)方法
就想弄一個(gè)winform結(jié)合html5的一個(gè)小東西,突有心血來潮,想在里面嵌套一個(gè)微信網(wǎng)頁版,下面小編給大家介紹下HTML阻止iframe跳轉(zhuǎn)頁面并使用iframe在頁面內(nèi)嵌微信網(wǎng)頁版的實(shí)2018-01-09