<iframe>元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）；
一、align 屬性（不贊成）
???????align屬性規(guī)定iframe相對于周圍元素的水平和垂直對齊方式，因為iframe元素是行內(nèi)元素，即不會在頁面上插入新行，這意味著文本和其他元素可以圍繞在其周圍，所以align屬性可以規(guī)定iframe相對于周圍元素的對齊方式；
二、frameborder屬性
???????frameborder屬性規(guī)定是否顯示iframe周圍的邊框，但出于實用性方面的原因，最好不用設(shè)置該屬性，而使用CSS來設(shè)置邊框,是否顯示邊框：1(yes),0(no)；
<html>
<body>
<iframe src ="/index.html" width="400" height="300" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
三、height 屬性
???????規(guī)定 iframe 的高度；
<html>
<body>
<iframe src ="/index.html" width="400px" height="500px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
四、marginheight 屬性
???????規(guī)定 iframe 的頂部和底部的空白邊距，以像素計；
<html>
<body>
<iframe src ="/example/html/demo_iframe.html" marginheight="50px"
width="400px" height="300px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
五、marginwidth 屬性
???????規(guī)定 iframe 的左邊和右邊的空白邊距，以像素計；
<html>
<body>
<iframe src ="/example/html/demo_iframe.html" marginwidth="50px"
width="400px" height="300px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
六、name 屬性
???????規(guī)定 iframe 的名稱，iframe 元素的 name 屬性用于在 JavaScript 中引用元素，或者作為鏈接的目標；
<html>
<body>
<iframe src="/example/html/demo_iframe.html" name="iframe_a">
<p>Your browser does not support iframes.</p>
</iframe>
<a target="iframe_a">W3School.com.cn</a>
</body>
</html>
七、sandbox屬性
???????如果被規(guī)定為空字符串（sandbox=""），sandbox 屬性將會啟用一系列對行內(nèi)框架中內(nèi)容的額外限制，sandbox 屬性的值既可以是一個空字符串（應(yīng)用所有的限制），也可以是空格分隔的預定義值列表（將移除特定的限制）；
- ""：應(yīng)用以下所有的限制；
- allow-same-origin：允許 iframe 內(nèi)容被視為與包含文檔有相同的來源；
- allow-top-navigation：允許 iframe 內(nèi)容從包含文檔導航（加載）內(nèi)容；
- allow-forms：允許表單提交；
- allow-scripts：允許腳本執(zhí)行；
<!DOCTYPE html>
<html>
<body>
<iframe src="/demo/demo_iframe_sandbox.html" sandbox="">
<p>Your browser does not support iframes.</p>
</iframe>
<p>"獲得日期和時間" 按鈕會在行內(nèi)框架中運行一段腳本。</p>
<p>由于 sandbox 屬性被設(shè)置為空字符串 ("")，行內(nèi)框架的內(nèi)容不允許運行腳本。</p>
<p>如果向 sandbox 屬性添加 "allow-scripts"，則允許運行 JavaScript。</p>
<p><b>注釋：</b>IE 9 以及更早的版本不支持 sandbox 屬性，Opera 12 以及更早的版本也不支持該屬性。</p>
</body>
</html>
八、scrolling 屬性
???????規(guī)定是否在 iframe 中顯示滾動條，默認地，如果內(nèi)容超出了 iframe，滾動條就會出現(xiàn)在 iframe 中；
- auto：在需要的情況下出現(xiàn)滾動條（默認值）；
- yes：始終顯示滾動條（即使不需要）；
- no：從不顯示滾動條（即使需要）；
<html>
<body>
<h3>iframe 中始終顯示滾動條：</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<h3>iframe 中從不顯示滾動條：</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="no">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
九、seamless 屬性
???????屬于邏輯屬性，當設(shè)置該屬性后，它規(guī)定了 <iframe> 看上去像是包含文檔的一部分（無邊框或滾動條）；
<!DOCTYPE html>
<html>
<body>
<p>這是一個段落。</p>
<iframe src="/demo/demo_iframe.html" seamless></iframe>
<p><b>注釋：</b>Opera、Chrome 以及 Safari 支持 seamless 屬性。</p>
</body>
</html>
十、src 屬性
???????規(guī)定在 iframe 中顯示的文檔的 URL；
- 絕對 URL：指向其他站點（比如 src="www.example.com/index.html"）；
- 相對 URL：指向站點內(nèi)的文件（比如 src="index.html"）；
<html>
<body>
<iframe src ="/index.html">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
十一、srcdoc 屬性
???????規(guī)定頁面的 HTML 內(nèi)容顯示在行內(nèi)框架中，該屬性與 sandbox 和 seamless 屬性一同使用，如果瀏覽器不支持 srcdoc 屬性，則相應(yīng)地會顯示在 src 屬性（若已設(shè)置）中規(guī)定的文件；
<!DOCTYPE html>
<html>
<body>
<iframe srcdoc="<p>Hello world!</p>" src="/demo/demo_iframe_srcdoc.html">
<p>Your browser does not support iframes.</p>
</iframe>
<p><b>注釋：</b>所有主流瀏覽器都支持 srcdoc 屬性，除了 Internet Explorer。</p>
</body>
</html>
十二、width 屬性
???????規(guī)定 iframe 的寬度；
<html>
<body>
<iframe src ="/index.html" width="400px" height="300px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
十三、iframe的基本特性
???????通常使用Iframe最基本的特性，就是能自由操作iframe和父框架的內(nèi)容（DOM），但前提條件是同域，如果跨域頂多只能實現(xiàn)頁面跳轉(zhuǎn)window.location.href；
A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>
B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>
使用A時，因為同域，父頁面可以對子頁面進行改寫,反之亦然；
使用B時，不同域，父頁面沒有權(quán)限改動子頁面,但可以實現(xiàn)頁面的跳轉(zhuǎn)；
十四、獲取iframe里的內(nèi)容
???????iframe.contentWindow：獲取iframe的window對象；
???????iframe.contentDocument：獲取iframe的document對象；
這兩個API只是DOM節(jié)點提供的方式(即getELement系列對象)
var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);//獲取iframe的window對象
console.log("document",idoc); //獲取iframe的document
console.log("html",idoc.documentElement);//獲取iframe的html
console.log("head",idoc.head); //獲取head
console.log("body",idoc.body); //獲取body
<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);
</script>
十五、在iframe中獲取父級內(nèi)容
???????在同域下，子iframe同樣也能操作父頁面內(nèi)容，在iframe中，可以通過在window上掛載的幾個API進行獲取；
???????window.parent：獲取上一級的window對象，如果還是iframe則是該iframe的window對象；
???????window.top：獲取最頂級容器的window對象，即打開頁面的文檔；
???????window.self：返回自身window的引用，可以理解為window===window.self；
十六、iframe的輪詢
???????之前的網(wǎng)頁可以使用iframe實現(xiàn)異步發(fā)送請求；
???????ajax的長輪詢是在ajax的readyState=4時再次執(zhí)行原函數(shù)，這里使用iframe也是一樣，異步創(chuàng)建iframe，然后reload，和后臺協(xié)商好，看后臺返回的信息放在哪，然后獲取里面的信息即可，這里是直接放在body里；
var iframeCon = docuemnt.querySelector('#container'),text; //傳遞的信息
var iframe = document.createElement('iframe'),
iframe.id = "frame",
iframe.style = "display:none;",
iframe.name="polling",
iframe.src="target.html";
iframeCon.appendChild(iframe);
iframe.onload= function(){
var iloc = iframe.contentWindow.location,
idoc = iframe.contentDocument;
setTimeout(function(){
text = idoc.getElementsByTagName('body')[0].textContent;
console.log(text);
iloc.reload(); //刷新頁面,再次獲取信息，并且會觸發(fā)onload函數(shù)
},2000);
}
十七、自適應(yīng)iframe之蜜汁廣告
???????通常使用iframe在頁面引入廣告，因為廣告一般是與頁面內(nèi)容不相關(guān)的，如果使用div在頁面中嵌套，會造成網(wǎng)頁內(nèi)容的紊亂，而且這樣勢必需要引入額外的css和js，極大的降低了網(wǎng)頁的安全性，因此需要使用iframe來插入廣告，我們可以將iframe理解為一個沙盒，里面的內(nèi)容能夠被top window完全控制，而且主頁的css樣式是不會入侵iframe里面的樣式，這些都給iframe的廣告命運埋下伏筆，默認情況下，iframe是不適合做展示信息的，需要對其進行decorate；
自適應(yīng)iframe
???????第一步：默認情況下，iframe會自帶滾動條，不會全屏，如果想自適應(yīng)iframe，需要去掉滾動條；
<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>
???????第二步：設(shè)置iframe的高為body的高；
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;
此外，還可以添加其他的裝飾屬性：
1）allowtransparency：true or false，是否允許iframe設(shè)置為透明，默認為false；
2）allowfullscreen：true or false，是否允許iframe全屏，默認為false；
// 樣式可以直接寫在內(nèi)聯(lián)樣式里面，也可以在css里面定義，不過對于廣告iframe來說，樣式寫在屬性中，是best pratice；
<iframe id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
十八、iframe安全性探索
???????iframe出現(xiàn)安全性有兩個方面，一是你的網(wǎng)頁被別人iframe；二是你iframe別人的網(wǎng)頁；當你的網(wǎng)頁被別人iframe時，可能容易被釣魚網(wǎng)站利用，為了防止頁面被一些不法分子利用，我們需要做好安全性措施；
防嵌套網(wǎng)頁
???????比如clickhacking就是使用iframe來攔截click事件，因為iframe享受著click的最優(yōu)先權(quán)，當有人在偽造的主頁中進行點擊的話，如果點在iframe上，則會默認是在操作iframe的頁面，所以釣魚網(wǎng)站就是使用這個技術(shù)，通過誘導用戶進行點擊，比如設(shè)計一個“妹妹寂寞了”等之類的網(wǎng)頁，誘導用戶點擊，但實際結(jié)果，看到的不是“妹妹”，而是被惡意微博吸粉，所以為了防止網(wǎng)站被釣魚，可以使用window.top來防止網(wǎng)頁被iframe；
//iframe2.html
// 限定你的網(wǎng)頁不能嵌套在任意網(wǎng)頁內(nèi)
if(window != window.top){
window.top.location.href = correctURL;
}
這段代碼的主要用途是限定你的網(wǎng)頁不能嵌套在任意網(wǎng)頁內(nèi)。如果你想引用同域的框架的話，可以判斷域名。
// 如果想引用同域的框架的話，可以判斷域名，如果不同域的話，上述內(nèi)容會報錯
if (top.location.host != window.location.host) {
top.location.href = window.location.href;
}
所以，這里可以使用try...catch...進行錯誤捕獲。如果發(fā)生錯誤，則說明不同域，表示你的頁面被盜用了。可能有些瀏覽器這樣寫是不會報錯，所以需要降級處理。
這時候再進行跳轉(zhuǎn)即可.
// 使用try...catch...進行錯誤捕獲，如果發(fā)生錯誤，則說明不同域，表示頁面被盜用了
try{
top.location.hostname; //檢測是否出錯
//如果沒有出錯，則降級處理
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
}
} catch(e){
top.location.href = window.location.href;
}
X-Frame-Options
???????X-Frame-Options是一個相應(yīng)頭，主要是描述服務(wù)器的網(wǎng)頁資源的iframe權(quán)限，其實就是將前端js對iframe的把控權(quán)交給服務(wù)器來進行處理：
- X-Frame-Options: DENY：拒絕任何iframe的嵌套請求；
- X-Frame-Options: SAMEORIGIN：只允許同源請求，例如網(wǎng)頁為 foo.com/123.php，則 foo.com 底下的所有網(wǎng)頁可以嵌入此網(wǎng)頁，但是 foo.com 以外的網(wǎng)頁不能嵌入；
- X-Frame-Options: ALLOW-FROM http://s3131212.com：只允許指定網(wǎng)頁的iframe請求，不過兼容性較差，Chrome不支持；
//js
if(window != window.top){
window.top.location.href = window.location.href;
} //等價于
X-Frame-Options: DENY //js
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
} //等價于
X-Frame-Options: SAMEORIGIN</pre>
???????X-Frame-Options屬性是對頁面的iframe進行的一個主要限制，不過涉及iframe的header可不止這一個，另外還有一個Content Security Policy，他同樣也可以對iframe進行限制，而且他應(yīng)該是未來網(wǎng)頁安全防護的主流；
CSP之頁面防護
???????和X-Frames-Options一樣，都需要在服務(wù)端設(shè)置好相關(guān)的Header，CSP能夠極大的防止頁面被XSS攻擊，而且可以制定js，css，img等相關(guān)資源的origin，防止被惡意注入，不過兼容性不好；
???????使用主要是在后端服務(wù)器上配置，在前端可以觀察Response Header里是否有這樣一個Header：
Content-Security-Policy: default-src 'self'
???????通常我們可以在CSP后配置各種指定資源路徑，有
- default-src,
- script-src,
- style-src,
- img-src,
- connect-src,
- font-src,
- object-src,
- media-src,
- sandbox,
- child-src,
- ...
???????如果未指定的話，會默認使用default-src規(guī)定的加載策略，默認配置就是同域： default-src "self"；這里還和iframe有一點瓜葛的就是child-src 和 sandbox，child-src就是用來指定iframe的有效加載路徑，其實和X-Frame-Options中配置allow-origin是一個道理，不過allow-origin沒有得到廠商的支持，而sandbox其實就和iframe的sandbox屬性是一樣的，他可以規(guī)定來源能夠帶有什么權(quán)限；
Content-Security-Policy: child-src 'self' http://example.com; sandbox allow-forms allow-same-origin</pre>
???????此時iframe的src就只能加載同域和example.com頁面，最后再補充一點：使用CSP能夠很好的防止XSS攻擊，原理就是CSP會默認escape掉內(nèi)聯(lián)樣式和腳本以及eval執(zhí)行，可以使用srcipt-src進行降低限制；
Content-Security-Policy: script-src 'unsafe-inline'
???????當然我們面臨的安全總量還有一個，就是當iframe別人的頁面時，我們需要對其進行安全設(shè)限，雖然跨域時iframe的安全性會大很多，但是互聯(lián)網(wǎng)沒有安全的地方，H5提供的新屬性sandbox可以很好的解決這個問題；
sandbox
???????sandbox就是用來給指定的iframe設(shè)置一個沙盒模型來限制iframe的更多權(quán)限，sandbox是H5的一個新屬性；
// 這樣就可以對iframe頁面進行一系列的限制
<iframe sandbox src="..."></iframe>
可以進行如下操作：
- script腳本不能執(zhí)行；
- 不能發(fā)送ajax請求；
- 不能使用本地存儲，即localStorage，cookie等；
- 不能創(chuàng)建新的彈窗和window；
- 不能發(fā)送表單；
- 不能加載額外插件比如flash等；
常用的配置項有：
| 配置 | 效果 |
|---|---|
| allow-forms | 允許進行提交表單 |
| allow-scripts | 運行執(zhí)行腳本 |
| allow-same-origin | 允許同域請求,比如ajax,storage |
| allow-top-navigation | 允許iframe能夠主導window.top進行頁面跳轉(zhuǎn) |
| allow-popups | 允許iframe中彈出新窗口,比如,window.open,target="_blank" |
| allow-pointer-lock | 在iframe中可以鎖定鼠標，主要和鼠標鎖定有關(guān) |
// 這樣可以保證js腳本的執(zhí)行，但是禁止iframe里的javascript執(zhí)行top.location = self.location
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="..."></iframe>
resolve iframe跨域
???????iframe就是一個隔離沙盒，相當于我們在一個頁面內(nèi)可以操控很多個標簽頁一樣，如果踩坑的童鞋應(yīng)該知道，iframe也可以解決跨域；
???????iframe可以解決二級域名跨域的情況，即主域相同而子域不同的情況，在兩個不同子域下（某一方使用iframe嵌套在另一方）：
// 兩個文件中分別加上document.domain = ‘foo.com’,指定相同的主域
// 然后,兩個文檔就可以進行交互了
http: //www.foo.com/a.html
http: //script.foo.com/b.html
//b.html是以iframe的形式嵌套在a.html中
//www.foo.com上的a.html
document.domain = 'foo.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.foo.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在這里操縱b.html
alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
//script.foo.com上的b.html
document.domain = 'foo.com';
???????默認情況下document.domain 是指window.location.hostname， 你可以手動更改，但是最多只能設(shè)置為主域名，通常，主域名就是指不帶www的hostname, 比如: foo.com , baidu.com ， 如果帶上www或者其他的前綴，就是二級域名或者多級域名，通過上述設(shè)置，相同的domain之后，就可以進行同域的相關(guān)操作；
H5的CDM跨域與iframe
???????如果設(shè)置的iframe域名和top window域名完全不同，則可以使用CDM(cross document messaging)進行跨域消息的傳遞；
發(fā)送消息：使用postmessage方法；
接收消息：監(jiān)聽message事件；
postmessage
???????該方法掛載到window對象上，即使用window.postmessage()調(diào)用，該方法接受兩個參數(shù)：postMessage(message, targetOrigin)
- message：就是傳遞給iframe的內(nèi)容，通常是string，如果想傳object對象也可以，但如果有條件，可以使用JSON.stringify進行轉(zhuǎn)化，這樣保證不會出bug；
- targetOrigin：接受你傳遞消息的域名，可以設(shè)置絕對路徑，也可以設(shè)置"*"或者"/"， *表示任意域名都行，"/"表示只能傳遞給同域域名；
<iframe src="http://tuhao.com" name="sendMessage"></iframe>
//當前腳本
let ifr = window.frames['sendMessage'];
//使用iframe的window向iframe發(fā)送message。
ifr.postmessage('give u a message', "http://tuhao.com");
//tuhao.com的腳本
window.addEventListener('message', receiver, false);
function receiver(e) {
if (e.origin == 'http://tuhao.com') {
if (e.data == 'give u a message') {
e.source.postMessage('received', e.origin); //向原網(wǎng)頁返回信息
} else {
alert(e.data);
}
}
}
???????當targetOrigin接收到message消息之后,，會觸發(fā)message事件，message提供的event對象上有3個重要的屬性，data,origin,source：
data：postMessage傳遞進來的值；
origin：發(fā)送消息的文檔所在的域；
source：發(fā)送消息文檔的window對象的代理，如果是來自同一個域，則該對象就是window，可以使用其所有方法，如果是不同的域，則window只能調(diào)用postMessage()方法返回信息
十九、<frameset>和<iframe>的區(qū)別
- iframe 和 frameset 都用于html頁面的框架布局；
- <iframe>：iframe 是個內(nèi)聯(lián)框架，是在頁面里生成個內(nèi)部框架；
<frameset >：frameset 定義一個框架集，包含多個子框架，每個框架都有獨立的文檔；
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
- frame不能脫離frameSet單獨使用，iframe可以；
- 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>
- 嵌套在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>-->
- 不嵌套在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>-->
- 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>
如果在同一個頁面使用了兩個以上的iframe：
???????IE中可以正常顯示，在firefox中只能顯示出第一個，使用兩個以上的frame在IE和firefox中均可正常顯示；frame與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)容，而不必重復這段內(nèi)容的代碼；iframe 可以放到表格里面，frame 則不行；
<table>
<tr>
<td><iframe id="" src=""></iframe></td><td></td>
</tr>
</table>
frame必須在frameset里，而frameset不能與body元素共存，也就說有frameset元素的文檔只能是一個框架集，不能有別的東西；
iframe放在網(wǎng)頁的什么地方都行，但是frame只能放到上下左右四個方向；
iframe是活動幀，而frame是非活動幀：
// iframe使用方法如下
<iframe scr="sourcefile" frameborder=0 width="width" height="height"></iframe>
iframe用起來更靈活，不需要frame那么多講究，而且放的位置也可以自己設(shè)， iframe是內(nèi)嵌的，不過也有不好的地方，就是位置在不同的瀏覽器和分辨率下有可能不同，有時會把本來好好的頁面搞得變形；
iframe可以加在網(wǎng)頁中任何一個地方，而frame通常做框架頁，iframe是一個網(wǎng)頁中的子框架，兩網(wǎng)頁間是父子關(guān)系，frame是框架，由多個并列的網(wǎng)頁構(gòu)成；
iframe是浮動的，就像是浮動面板，而frame是固定的，只能四個方向上的；
<iframe>是被嵌入在網(wǎng)頁的元素，而<frame>用于組成一個頁面的多個框架，iframe更利于版面的設(shè)計，frame一條直一條豎的不美觀，frame的那一條線也可以去掉的呦！只不過，iframe更方便對其進行數(shù)據(jù)的交換吧！
iframe可以放置到你想放的任意位置，控制起來比frame方便；iframe是內(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>只用于局部；
