浅谈Iframe和FRAME的区别
一、Iframe標記的使用?
Frame標記即幀標記，我們所說的多幀結(jié)構(gòu)就是在一個瀏覽器窗口中顯示多個HTML文件。現(xiàn)在，我們遇到一種很現(xiàn)實的情況：如有一個教程，是一節(jié)一節(jié)地上，每頁末尾做一個“上一節(jié)“、“下一節(jié)“的鏈接，除了每節(jié)教程內(nèi)容不同之外，頁面其它部分內(nèi)容都是相同的，如果一頁一頁地做笨頁面，這似乎太讓人厭煩了，這時突發(fā)奇想，如果有一種方法讓頁面其它地方不變，只將教程做成一頁一頁的內(nèi)容頁，不含其它內(nèi)容，在點擊上下翻頁鏈接時，只改變教程內(nèi)容部分，其它保持不變，這樣，一是省時，另則以后如教程有個三長兩短的變動，也很方便，不致于牽一發(fā)而動全軍了;更重要的是將那些廣告Banner、欄目列表、導(dǎo)航等幾乎每頁的都有的東西只下載一次后就不再下載了。?
Iframe標記，又叫浮動幀標記，你可以用它將一個HTML文檔嵌入在一個HTML中顯示。它不同于Frame標記最大的特征即這個標記所引用的HTML文件不是與另外的HTML文件相互獨立顯示，而是可以直接嵌入在一個HTML文件中，與這個HTML文件內(nèi)容相互融合，成為一個整體，另外，還可以多次在一個頁面內(nèi)顯示同一內(nèi)容，而不必重復(fù)寫內(nèi)容，一個形象的比喻即“畫中畫“電視。?
Iframe標記的使用格式是:?
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>?
src：文件的路徑，既可是HTML文件，也可以是文本、ASP等；?
width、height："畫中畫"區(qū)域的寬與高；?
scrolling:當SRC的指定的HTML文件在指定的區(qū)域不顯不完時，滾動選項，如果設(shè)置為NO，則不出現(xiàn)滾動條；如為Auto：則自動出現(xiàn)滾動條；如為Yes，則顯示;?
FrameBorder：區(qū)域邊框的寬度，為了讓“畫中畫“與鄰近的內(nèi)容相融合，常設(shè)置為0
Frame 對象
Frame 對象代表一個 HTML 框架。
在 HTML 文檔中 <frame> 每出現(xiàn)一次，就會創(chuàng)建一個 Frame對象。
Frame 對象的屬性
| 屬性 | 描述 |
| contentDocument | 容納框架的內(nèi)容的文檔。 |
| frameBorder | 設(shè)置或返回是否顯示框架周圍的邊框。 |
| id | 設(shè)置或返回框架的 id。 |
| longDesc | 設(shè)置或返回指向包含框架內(nèi)容描述文檔的 URL。 |
| marginHeight | 設(shè)置或返回框架的頂部和底部頁空白。 |
| marginWidth | 設(shè)置或返回框架的左邊緣和右邊緣的空白。 |
| name | 設(shè)置或返回框架的名稱。 |
| noResize | 設(shè)置或返回框架是否可調(diào)整大小。 |
| scrolling | 設(shè)置或返回框架是否可擁有滾動條。 |
| src | 設(shè)置或返回應(yīng)被加載到框架中的文檔的 URL。 |
標準屬性
| 屬性 | 描述 |
| className | 設(shè)置或返回元素的 class 屬性。 |
| dir | 設(shè)置或返回文本的方向。 |
| lang | 設(shè)置或返回元素的語言代碼。 |
| title | 設(shè)置或返回元素的 title 屬性。 |
?
1、frame不能脫離frameSet單獨使用，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>?
3、嵌套在frameSet中的iframe必需放在body中；如下可以正常顯示：?
? <body>?
??? <frameset>??
????? <iframe?? name="frame1"?? src="test1.htm"/>??
????? <iframe?? name="frame2"?? src="test2.htm"/>??
??? </frameset>??
? </body>?
如下不能正常顯示：?
? <!--<body>-->?
??? <frameset>??
????? <iframe?? name="frame1"?? src="test1.htm"/>??
????? <iframe?? name="frame2"?? src="test2.htm"/>??
??? </frameset>??
? <!--</body>-->?
4、不嵌套在frameSet中的iframe可以隨意使用；?
???? 如下均可以正常顯示：?
<body>?
?? <iframe?? name="frame1"?? src="test1.htm"/>??
?? <iframe?? name="frame2"?? src="test2.htm"/>??
</body>?
<!--<body>-->?
?? <iframe?? name="frame1"?? src="test1.htm"/>??
?? <iframe?? name="frame2"?? src="test2.htm"/>??
<!--</body>-->?
5、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>?
1Frame與Iframe兩者可以實現(xiàn)的功能基本相同，不過Iframe比Frame具有更多的靈活性。?
frame是整個頁面的框架，iframe是內(nèi)嵌的網(wǎng)頁元素，也可以說是內(nèi)嵌的框架?
Iframe標記又叫浮動幀標記，可以用它將一個HTML文檔嵌入在一個HTML中顯示。它和Frame標記的最大區(qū)別是在網(wǎng)頁中嵌入的<Iframe></Iframe>所包含的內(nèi)容與整個頁面是一個整體，而<Frame></Frame>所包含的內(nèi)容是一個獨立的個體，是可以獨立顯示的。另外，應(yīng)用Iframe還可以在同一個頁面中多次顯示同一內(nèi)容，而不必重復(fù)這段內(nèi)容的代碼。?
2iframe 可以放到表格里面。frame 則不行。?
<table>?
<tr>?
<td><iframe id="" src=""></iframe></td><td></td>?
</tr>?
</table>?
3frame必須在frameset里?
而frameset不能與body元素共存，也就說有frameset元素的文檔只能是一個框架集，不能有別的東東?
4IFrame是放在網(wǎng)頁的什么地方都行???
? 但是frame只能放到上下左右四個方向?
5。iframme?? 是活動幀???
? 而frame是非活動幀???
? iframe使用方法如下???
? <iframe?? scr="sourcefile"?? frameborder=0?? width="width"?? height="height"></iframe>?
iframe用起來更靈活，不需要frame那么多講究???
而且放的位置也可以自己設(shè)?，
iframe是內(nèi)嵌的，比較靈活，不過也有不好的地方，就是位置在不同的瀏覽器和分辨率下有可能不同，有時會把本來好好的頁面搞得變形?
iframe就沒有這個限制?
6iframe?? 可以加在網(wǎng)頁中任何一個地方。???
? 而frame?? 通常做框架頁?
iframe是一個網(wǎng)頁中的子框架,兩網(wǎng)頁間是父子關(guān)系???
????
? frame是框架,由多個并列的網(wǎng)頁構(gòu)成?，iframe是浮動的。就像是浮動面板，而frame是固定的。只能四個方向上的。???
7<iframe>是被嵌入在網(wǎng)頁的元素，而<frame>用于組成一個頁面的多個框架！?
?iframe?? 更利于版面的設(shè)計???
? frame???? 一條直一條豎的不美觀?
frame的那一條線也可以去掉的呦！
只不過，iframe更方便對其進行數(shù)據(jù)的交換吧！?
iframe可以放置到你想放的任意位置,控制起來比frame方便?
8iframe是內(nèi)部幀，可以嵌在一個頁面里面，設(shè)置內(nèi)部幀的屬性可以使得整體看上去象一個完整的頁面，而不是由多個頁面組成，frame有frame的好處，比如何多網(wǎng)站，上面放廣告條，左邊放菜單，右邊放內(nèi)容，這樣上邊和左邊的內(nèi)容都可不動，只刷新右邊頁面的內(nèi)容，選擇iframe還是frame完全看自己的需求。?
說白了，用IFrame比用Frame少一個文件（FrameSet），但支持Frame的瀏覽器比較多。?
還有iframe可以放在表格里,然后ifame設(shè)置成width=100%?? height=100%???
? 我就可以只需修改我的表格的寬度和高度,這樣的話有利于排版??
其實Frame是一個控件???
? 使用方法和Panle相同。?
frame是把網(wǎng)頁分成多個頁面的頁面。它要有一個框架集頁面frameset???
? iframe是一個浮動的框架,就是在你的頁面里再加上一個頁面,?
<frame>用來把頁面橫著或豎著切開，???
? <iframe>用來在頁面中插入一個矩形的小窗口?
Frame一般用來設(shè)置頁面布局,將整個頁面分成規(guī)則的幾塊,每一塊里面包含一個新頁面.???
? iframe用來在頁面的任何地方插入一個新的頁面.???
????
? 因此,Frame用來控制頁面格式,比如一本書,左邊是章節(jié)目錄,右邊是正文,正文很長,看的時候要拖動,但又不想目錄也被拖動得開不到了.因此最好將頁面用Frame分成規(guī)則的2頁,一左一右.???
????
? 而iframe則更靈活,不要求將整個頁面劃分,你可以在頁面任何地方用iframe嵌入新的頁面.?
我個人認為:???
? <frame>用于全頁面???
? <iframe>只用于局部??
除了對搜索引擎不友好外，還有什么明顯的缺陷嗎？
?
目前框架的所有優(yōu)點完全可以使用Ajax實現(xiàn)，因此已經(jīng)沒有必要使用框架了。減少框架也可以減少出現(xiàn)XXS等問題。減少框架也可以減少一定請求。
但是有一些情況是必須使用框架，例如想把頁面的JS獨立隔離或者使用框架做一些跨域的Ajax請求。 例如騰訊微博，他通過框架代理，使所有Ajax請求Referer進行統(tǒng)一，既方便CRSF的控制也可以做到跨域的效果。例如騰訊微博的：http://message.t.qq.com/proxy.html?文件，他就是通過框架來實現(xiàn)跨域操作。
又例如在非HTML5的環(huán)境下要做到無刷新上傳也可以通過框架構(gòu)造一個上傳文件環(huán)境。當然這個也可以用Flash代替。
?
重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數(shù)據(jù)的傳輸，增加了網(wǎng)頁下載速度)
?
方便制作導(dǎo)航欄
框架的缺點
會產(chǎn)生很多頁面，不容易管理
不容易打印
瀏覽器的后退按鈕無效
代碼復(fù)雜,無法被一些搜索引擎索引到
多數(shù)小型的移動設(shè)備（PDA 手機）無法完全顯示框架
多框架的頁面會增加服務(wù)器的http請求
?
iframe高度控制很不方便，需要使用各種HACK，除非確定開發(fā)的是GReader之類的玩意；
想要用模態(tài)對話框時位置與遮罩都很煩，除非我就不打算用fixed的庫了。
然后，看到GR之類的似乎也沒用iframe的樣子，就不考慮在這方面做太多嘗試了…
frameset相關(guān)屬性介紹
border?設(shè)置框架的邊框粗細。
bordercolor?設(shè)置框架的邊框顏色。
frameborder?設(shè)置是否顯示框架邊框。設(shè)定值只有0、1；0 表示不要邊框，1 表示要顯示邊框。
cols
縱向分割頁面。其數(shù)值表示方法有三種：“30%、30（或者30px）、”；數(shù)值的個數(shù)代表分成的視窗數(shù)目且數(shù)值之間用“,”隔開。“30%”表示該框架區(qū)域占全部瀏覽器頁面區(qū)域的30%；“30”表示該區(qū)域橫向?qū)挾葹?0像素；“”表示該區(qū)域占用余下頁面空間。例如：cols="25%,200,*" 表示將頁面分為三部分，左面部分占頁面25%，中間橫向?qū)挾葹?00像素，頁面余下的作為右面部分。
rows?橫向分割頁面。數(shù)值表示方法與意義與cols相同。
framespacing?設(shè)置框架與框架間的保留的空白距離。
?
轉(zhuǎn)載于:https://www.cnblogs.com/nostic/articles/5770962.html
總結(jié)
以上是生活随笔為你收集整理的浅谈Iframe和FRAME的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL性能优化笔记整理
- 下一篇： VR+廣告