舉例講解HTML中iframe和frame的區(qū)別

不知道你在項(xiàng)目中用過frameset屬性沒有,frameset這個(gè)屬性是在去年我在一個(gè)在線客服系統(tǒng)制作中用過,因?yàn)榭头到y(tǒng)要有固定的布局,上面一塊,下面一塊等等,當(dāng)時(shí)就是用的frameset和frame。在我用完了這些屬性之后,我才明白了iframe和frame的區(qū)別。因?yàn)樵谶@之前,我項(xiàng)目中一般不用框架,用的話也就是用到iframe。
下面說說其具體區(qū)別吧!總結(jié)了如下幾點(diǎn)。
1、frame不能脫離frameSet單獨(dú)使用,iframe可以;
2、frame不能放在body中;
如下可以正常顯示:
- <!--<body>-->
- <frameset rows="50%,*">
- <frame name="frame1" src="test1.htm"/>
- <frame name="frame2" src="test2.htm"/>
- </frameset>
- <!--<body>-->
如下不能正常顯示:
- <body>
- <frameset rows="50%,*">
- <frame name="frame1" src="test1.htm"/>
- <frame name="frame2" src="test2.htm"/>
- </frameset>
- <body>
相反,假如iframe放在frameSet屬性下面,則必需放在body中
- <body>
- <frameset>
- <iframe name="frame1" src="test1.htm"/>
- <iframe name="frame2" src="test2.htm"/>
- </frameset>
- </body>
3、iframe是一個(gè)html標(biāo)簽,在html中任何地方,都可以隨意使用,而frame不可以。
- <body>
- <iframe name="frame1" src="test1.htm"/>
- <iframe name="frame2" src="test2.htm"/>
- </body>
- <table>
- <tr>
- <td><iframe id="" src=""></iframe></td><td></td>
- </tr>
- </table>
而frame必須嵌套在frameSet中,且不能再table等標(biāo)簽中使用。
4、frame的高度只能通過frameSet控制;iframe可以自己控制,不能通過frameSet控制
- <!--<body>-->
- <frameset rows="50%,*">
- <frame name="frame1" src="test1.htm"/>
- <frame name="frame2" src="test2.htm"/>
- </frameset>
- <!--</body>-->
- <body>
- <frameset>
- <iframe height="30%" name="frame1" src="test1.htm"/>
- <iframe height="100" name="frame2" src="test2.htm"/>
- </frameset>
- </body>
5、如果在同一個(gè)頁面使用了兩個(gè)以上的iframe,在IE中可以正常顯示,在firefox中只能顯示出第一個(gè);使用兩個(gè)以上的frame在IE和firefox中均可正常
相關(guān)文章
HTML5新標(biāo)簽兼容——> <!--<if lt IE 9><!endif-->
這篇文章主要介紹了HTML5新標(biāo)簽兼容——> <!--<if lt IE 9><!endif--> 的兩種方法,需要的朋友可以參考下2018-09-12- 離線訪問對基于網(wǎng)絡(luò)的應(yīng)用而言越來越重要,這篇文章主要介紹了HTML5 manifest離線緩存的示例代碼的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨2018-08-08
- 這篇文章主要介紹了詳解HTML5中的manifest緩存使用,文中同時(shí)介紹了相關(guān)的一些自動(dòng)化工具,需要的朋友可以參考下2015-09-09
HTML中iFrame標(biāo)簽的兩個(gè)用法介紹
這篇文章主要介紹了HTML中iFrame標(biāo)簽的兩個(gè)用法,分別是作為彈出層鋪底覆蓋 ,和跨域?qū)懭隿ookie,需要的朋友可以參考下2015-07-09使用HTML5的Notification API制作web通知的教程
這篇文章主要介紹了使用HTML5的Notification API制作web通知的教程,示例包括需要使用到的相關(guān)CSS以及Javascript代碼,需要的朋友可以參考下2015-05-08html5觸摸事件判斷滑動(dòng)方向的實(shí)現(xiàn)
這篇文章主要介紹了html5觸摸事件判斷滑動(dòng)方向的實(shí)現(xiàn)的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-05- 這篇文章主要介紹了HTML5中判斷橫屏豎屏的方法(移動(dòng)端)的相關(guān)資料,需要的朋友可以參考下2016-08-04
- 長期以來我們一直缺少一個(gè)判斷用戶是否正在瀏覽某個(gè)指定標(biāo)簽頁的方法。用戶是否去看別的網(wǎng)站了?他們切換回來了么?2014-05-03
HTML5+CSS3實(shí)現(xiàn)超酷登錄窗口(自動(dòng)隱藏默認(rèn)文本及判斷必填字段)
輸入框獲取焦點(diǎn)后會(huì)自動(dòng)隱藏默認(rèn)文本,如果為空會(huì)提示必填字段2013-05-21html5中canvas學(xué)習(xí)筆記2-判斷瀏覽器是否支持canvas
判斷瀏覽器是否支持canvas,本人搜集整理了一些使用方法,感興趣的朋友可以了解下2013-01-06