HTML <iframe>和<frame>標(biāo)簽

<iframe>元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）；

一壁熄、align 屬性（不贊成）

???????align屬性規(guī)定iframe相對(duì)于周圍元素的水平和垂直對(duì)齊方式帚豪，因?yàn)閕frame元素是行內(nèi)元素，即不會(huì)在頁(yè)面上插入新行草丧，這意味著文本和其他元素可以圍繞在其周圍志鞍，所以align屬性可以規(guī)定iframe相對(duì)于周圍元素的對(duì)齊方式；

二方仿、frameborder屬性

???????frameborder屬性規(guī)定是否顯示iframe周圍的邊框，但出于實(shí)用性方面的原因，最好不用設(shè)置該屬性仙蚜，而使用CSS來(lái)設(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 的頂部和底部的空白邊距，以像素計(jì)贾节；

<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 的左邊和右邊的空白邊距，以像素計(jì)栗涂；

<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 中引用元素斤程，或者作為鏈接的目標(biāo)角寸；

<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 屬性將會(huì)啟用一系列對(duì)行內(nèi)框架中內(nèi)容的額外限制扁藕，sandbox 屬性的值既可以是一個(gè)空字符串（應(yīng)用所有的限制），也可以是空格分隔的預(yù)定義值列表（將移除特定的限制）疚脐；

  • ""：應(yīng)用以下所有的限制亿柑；
  • allow-same-origin：允許 iframe 內(nèi)容被視為與包含文檔有相同的來(lái)源；
  • allow-top-navigation：允許 iframe 內(nèi)容從包含文檔導(dǎo)航（加載）內(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>"獲得日期和時(shí)間" 按鈕會(huì)在行內(nèi)框架中運(yùn)行一段腳本照卦。</p>
<p>由于 sandbox 屬性被設(shè)置為空字符串 ("")式矫，行內(nèi)框架的內(nèi)容不允許運(yùn)行腳本。</p>
<p>如果向 sandbox 屬性添加 "allow-scripts"役耕，則允許運(yùn)行 JavaScript采转。</p>
<p><b>注釋：</b>IE 9 以及更早的版本不支持 sandbox 屬性，Opera 12 以及更早的版本也不支持該屬性瞬痘。</p>

</body>
</html>
八故慈、scrolling 屬性

???????規(guī)定是否在 iframe 中顯示滾動(dòng)條，默認(rèn)地框全，如果內(nèi)容超出了 iframe察绷，滾動(dòng)條就會(huì)出現(xiàn)在 iframe 中；

  • auto：在需要的情況下出現(xiàn)滾動(dòng)條（默認(rèn)值）津辩；
  • yes：始終顯示滾動(dòng)條（即使不需要）拆撼；
  • no：從不顯示滾動(dòng)條（即使需要）容劳；
<html>
<body>
<h3>iframe 中始終顯示滾動(dòng)條：</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<h3>iframe 中從不顯示滾動(dòng)條：</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="no">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
九、seamless 屬性

???????屬于邏輯屬性闸度，當(dāng)設(shè)置該屬性后竭贩，它規(guī)定了 <iframe> 看上去像是包含文檔的一部分（無(wú)邊框或滾動(dòng)條）；

<!DOCTYPE html>
<html>
<body>
<p>這是一個(gè)段落莺禁。</p>
<iframe src="/demo/demo_iframe.html" seamless></iframe>
<p><b>注釋：</b>Opera留量、Chrome 以及 Safari 支持 seamless 屬性。</p>
</body>
</html>
十哟冬、src 屬性

???????規(guī)定在 iframe 中顯示的文檔的 URL楼熄；

  • 絕對(duì) URL：指向其他站點(diǎn)（比如 src="www.example.com/index.html"）；
  • 相對(duì) URL：指向站點(diǎn)內(nèi)的文件（比如 src="index.html"）浩峡；
<html>
<body>
<iframe src ="/index.html">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
十一可岂、srcdoc 屬性

???????規(guī)定頁(yè)面的 HTML 內(nèi)容顯示在行內(nèi)框架中，該屬性與 sandbox 和 seamless 屬性一同使用红符，如果瀏覽器不支持 srcdoc 屬性青柄，則相應(yīng)地會(huì)顯示在 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）糜芳，但前提條件是同域飒货，如果跨域頂多只能實(shí)現(xiàn)頁(yè)面跳轉(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時(shí)峭竣，因?yàn)橥蛱粮ǎ疙?yè)面可以對(duì)子頁(yè)面進(jìn)行改寫,反之亦然；
使用B時(shí)皆撩，不同域扣墩，父頁(yè)面沒(méi)有權(quán)限改動(dòng)子頁(yè)面,但可以實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)；

十四扛吞、獲取iframe里的內(nèi)容

???????iframe.contentWindow：獲取iframe的window對(duì)象呻惕；
???????iframe.contentDocument：獲取iframe的document對(duì)象；
這兩個(gè)API只是DOM節(jié)點(diǎn)提供的方式(即getELement系列對(duì)象)

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);//獲取iframe的window對(duì)象
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中獲取父級(jí)內(nèi)容

???????在同域下亚脆，子iframe同樣也能操作父頁(yè)面內(nèi)容，在iframe中盲泛，可以通過(guò)在window上掛載的幾個(gè)API進(jìn)行獲缺舫帧键耕；
???????window.parent：獲取上一級(jí)的window對(duì)象，如果還是iframe則是該iframe的window對(duì)象弥喉；
???????window.top：獲取最頂級(jí)容器的window對(duì)象郁竟，即打開頁(yè)面的文檔；
???????window.self：返回自身window的引用由境，可以理解為window===window.self；

十六蓖议、iframe的輪詢

???????之前的網(wǎng)頁(yè)可以使用iframe實(shí)現(xiàn)異步發(fā)送請(qǐng)求虏杰；
???????ajax的長(zhǎng)輪詢是在ajax的readyState=4時(shí)再次執(zhí)行原函數(shù)，這里使用iframe也是一樣勒虾，異步創(chuàng)建iframe纺阔，然后reload，和后臺(tái)協(xié)商好修然，看后臺(tái)返回的信息放在哪笛钝，然后獲取里面的信息即可，這里是直接放在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(); //刷新頁(yè)面,再次獲取信息玻靡，并且會(huì)觸發(fā)onload函數(shù)
      },2000);
    }
十七、自適應(yīng)iframe之蜜汁廣告

???????通常使用iframe在頁(yè)面引入廣告中贝，因?yàn)閺V告一般是與頁(yè)面內(nèi)容不相關(guān)的囤捻，如果使用div在頁(yè)面中嵌套，會(huì)造成網(wǎng)頁(yè)內(nèi)容的紊亂邻寿，而且這樣勢(shì)必需要引入額外的css和js蝎土，極大的降低了網(wǎng)頁(yè)的安全性，因此需要使用iframe來(lái)插入廣告绣否，我們可以將iframe理解為一個(gè)沙盒誊涯，里面的內(nèi)容能夠被top window完全控制，而且主頁(yè)的css樣式是不會(huì)入侵iframe里面的樣式蒜撮，這些都給iframe的廣告命運(yùn)埋下伏筆暴构，默認(rèn)情況下，iframe是不適合做展示信息的淀弹，需要對(duì)其進(jìn)行decorate丹壕；

自適應(yīng)iframe

???????第一步：默認(rèn)情況下，iframe會(huì)自帶滾動(dòng)條薇溃，不會(huì)全屏菌赖，如果想自適應(yīng)iframe，需要去掉滾動(dòng)條沐序；

<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è)置為透明邑时，默認(rèn)為false奴紧；
2）allowfullscreen：true or false，是否允許iframe全屏晶丘，默認(rèn)為false黍氮；

// 樣式可以直接寫在內(nèi)聯(lián)樣式里面，也可以在css里面定義浅浮，不過(guò)對(duì)于廣告iframe來(lái)說(shuō)沫浆，樣式寫在屬性中，是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)安全性有兩個(gè)方面，一是你的網(wǎng)頁(yè)被別人iframe郁油；二是你iframe別人的網(wǎng)頁(yè)本股；當(dāng)你的網(wǎng)頁(yè)被別人iframe時(shí)，可能容易被釣魚網(wǎng)站利用桐腌，為了防止頁(yè)面被一些不法分子利用拄显，我們需要做好安全性措施；

防嵌套網(wǎng)頁(yè)

???????比如clickhacking就是使用iframe來(lái)攔截click事件哩掺，因?yàn)閕frame享受著click的最優(yōu)先權(quán)凿叠，當(dāng)有人在偽造的主頁(yè)中進(jìn)行點(diǎn)擊的話，如果點(diǎn)在iframe上嚼吞，則會(huì)默認(rèn)是在操作iframe的頁(yè)面盒件，所以釣魚網(wǎng)站就是使用這個(gè)技術(shù)，通過(guò)誘導(dǎo)用戶進(jìn)行點(diǎn)擊舱禽，比如設(shè)計(jì)一個(gè)“妹妹寂寞了”等之類的網(wǎng)頁(yè)炒刁，誘導(dǎo)用戶點(diǎn)擊，但實(shí)際結(jié)果誊稚，看到的不是“妹妹”翔始，而是被惡意微博吸粉，所以為了防止網(wǎng)站被釣魚里伯，可以使用window.top來(lái)防止網(wǎng)頁(yè)被iframe城瞎；

//iframe2.html
// 限定你的網(wǎng)頁(yè)不能嵌套在任意網(wǎng)頁(yè)內(nèi)
if(window != window.top){
    window.top.location.href = correctURL;
}

這段代碼的主要用途是限定你的網(wǎng)頁(yè)不能嵌套在任意網(wǎng)頁(yè)內(nèi)。如果你想引用同域的框架的話疾瓮，可以判斷域名脖镀。

// 如果想引用同域的框架的話，可以判斷域名狼电，如果不同域的話蜒灰，上述內(nèi)容會(huì)報(bào)錯(cuò)
if (top.location.host != window.location.host) {
　　top.location.href = window.location.href;
}

所以弦蹂，這里可以使用try...catch...進(jìn)行錯(cuò)誤捕獲。如果發(fā)生錯(cuò)誤强窖，則說(shuō)明不同域凸椿，表示你的頁(yè)面被盜用了〕崮纾可能有些瀏覽器這樣寫是不會(huì)報(bào)錯(cuò)脑漫，所以需要降級(jí)處理。
這時(shí)候再進(jìn)行跳轉(zhuǎn)即可.

// 使用try...catch...進(jìn)行錯(cuò)誤捕獲未巫，如果發(fā)生錯(cuò)誤窿撬，則說(shuō)明不同域，表示頁(yè)面被盜用了
try{
　　top.location.hostname; //檢測(cè)是否出錯(cuò)
　　//如果沒(méi)有出錯(cuò)叙凡，則降級(jí)處理
　　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是一個(gè)相應(yīng)頭，主要是描述服務(wù)器的網(wǎng)頁(yè)資源的iframe權(quán)限密末，其實(shí)就是將前端js對(duì)iframe的把控權(quán)交給服務(wù)器來(lái)進(jìn)行處理：

  • X-Frame-Options: DENY：拒絕任何iframe的嵌套請(qǐng)求握爷；
  • X-Frame-Options: SAMEORIGIN：只允許同源請(qǐng)求，例如網(wǎng)頁(yè)為 foo.com/123.php严里，則 foo.com 底下的所有網(wǎng)頁(yè)可以嵌入此網(wǎng)頁(yè)新啼，但是 foo.com 以外的網(wǎng)頁(yè)不能嵌入；
  • X-Frame-Options: ALLOW-FROM http://s3131212.com：只允許指定網(wǎng)頁(yè)的iframe請(qǐng)求刹碾，不過(guò)兼容性較差燥撞，Chrome不支持；
//js
if(window != window.top){
    window.top.location.href = window.location.href;
} //等價(jià)于
X-Frame-Options: DENY //js
if (top.location.hostname != window.location.hostname) { 
　　　　top.location.href =window.location.href;
} //等價(jià)于
X-Frame-Options: SAMEORIGIN</pre>

???????X-Frame-Options屬性是對(duì)頁(yè)面的iframe進(jìn)行的一個(gè)主要限制迷帜，不過(guò)涉及iframe的header可不止這一個(gè)物舒，另外還有一個(gè)Content Security Policy，他同樣也可以對(duì)iframe進(jìn)行限制戏锹，而且他應(yīng)該是未來(lái)網(wǎng)頁(yè)安全防護(hù)的主流冠胯；

CSP之頁(yè)面防護(hù)

???????和X-Frames-Options一樣，都需要在服務(wù)端設(shè)置好相關(guān)的Header锦针，CSP能夠極大的防止頁(yè)面被XSS攻擊荠察，而且可以制定js，css奈搜，img等相關(guān)資源的origin悉盆，防止被惡意注入，不過(guò)兼容性不好馋吗；
???????使用主要是在后端服務(wù)器上配置焕盟，在前端可以觀察Response Header里是否有這樣一個(gè)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,
  • ...
    ???????如果未指定的話耗美，會(huì)默認(rèn)使用default-src規(guī)定的加載策略京髓，默認(rèn)配置就是同域： default-src "self"航缀；這里還和iframe有一點(diǎn)瓜葛的就是child-src 和 sandbox，child-src就是用來(lái)指定iframe的有效加載路徑堰怨，其實(shí)和X-Frame-Options中配置allow-origin是一個(gè)道理芥玉，不過(guò)allow-origin沒(méi)有得到廠商的支持，而sandbox其實(shí)就和iframe的sandbox屬性是一樣的备图，他可以規(guī)定來(lái)源能夠帶有什么權(quán)限灿巧；
Content-Security-Policy: child-src 'self' http://example.com; sandbox allow-forms allow-same-origin</pre>

???????此時(shí)iframe的src就只能加載同域和example.com頁(yè)面，最后再補(bǔ)充一點(diǎn)：使用CSP能夠很好的防止XSS攻擊揽涮，原理就是CSP會(huì)默認(rèn)escape掉內(nèi)聯(lián)樣式和腳本以及eval執(zhí)行抠藕，可以使用srcipt-src進(jìn)行降低限制；

Content-Security-Policy: script-src 'unsafe-inline'

???????當(dāng)然我們面臨的安全總量還有一個(gè)蒋困，就是當(dāng)iframe別人的頁(yè)面時(shí)盾似，我們需要對(duì)其進(jìn)行安全設(shè)限，雖然跨域時(shí)iframe的安全性會(huì)大很多雪标，但是互聯(lián)網(wǎng)沒(méi)有安全的地方零院，H5提供的新屬性sandbox可以很好的解決這個(gè)問(wèn)題；

sandbox

???????sandbox就是用來(lái)給指定的iframe設(shè)置一個(gè)沙盒模型來(lái)限制iframe的更多權(quán)限村刨，sandbox是H5的一個(gè)新屬性告抄；

// 這樣就可以對(duì)iframe頁(yè)面進(jìn)行一系列的限制
<iframe sandbox src="..."></iframe>

可以進(jìn)行如下操作：

  • script腳本不能執(zhí)行；
  • 不能發(fā)送ajax請(qǐng)求嵌牺；
  • 不能使用本地存儲(chǔ)打洼，即localStorage，cookie等逆粹；
  • 不能創(chuàng)建新的彈窗和window募疮；
  • 不能發(fā)送表單；
  • 不能加載額外插件比如flash等枯饿；

常用的配置項(xiàng)有：

配置 效果
allow-forms 允許進(jìn)行提交表單
allow-scripts 運(yùn)行執(zhí)行腳本
allow-same-origin 允許同域請(qǐng)求,比如ajax,storage
allow-top-navigation 允許iframe能夠主導(dǎo)window.top進(jìn)行頁(yè)面跳轉(zhuǎn)
allow-popups 允許iframe中彈出新窗口,比如,window.open,target="_blank"
allow-pointer-lock 在iframe中可以鎖定鼠標(biāo)酝锅，主要和鼠標(biāo)鎖定有關(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就是一個(gè)隔離沙盒奢方，相當(dāng)于我們?cè)谝粋€(gè)頁(yè)面內(nèi)可以操控很多個(gè)標(biāo)簽頁(yè)一樣搔扁，如果踩坑的童鞋應(yīng)該知道，iframe也可以解決跨域蟋字；
???????iframe可以解決二級(jí)域名跨域的情況稿蹲，即主域相同而子域不同的情況，在兩個(gè)不同子域下（某一方使用iframe嵌套在另一方）：

// 兩個(gè)文件中分別加上document.domain = ‘foo.com’,指定相同的主域
// 然后,兩個(gè)文檔就可以進(jìn)行交互了
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';

???????默認(rèn)情況下document.domain 是指window.location.hostname鹊奖， 你可以手動(dòng)更改苛聘，但是最多只能設(shè)置為主域名，通常，主域名就是指不帶www的hostname, 比如: foo.com , baidu.com 设哗， 如果帶上www或者其他的前綴唱捣，就是二級(jí)域名或者多級(jí)域名，通過(guò)上述設(shè)置网梢，相同的domain之后震缭，就可以進(jìn)行同域的相關(guān)操作；

H5的CDM跨域與iframe

???????如果設(shè)置的iframe域名和top window域名完全不同战虏，則可以使用CDM(cross document messaging)進(jìn)行跨域消息的傳遞拣宰；
發(fā)送消息：使用postmessage方法；
接收消息：監(jiān)聽message事件烦感；

postmessage

???????該方法掛載到window對(duì)象上巡社，即使用window.postmessage()調(diào)用，該方法接受兩個(gè)參數(shù)：postMessage(message, targetOrigin)

  • message：就是傳遞給iframe的內(nèi)容手趣，通常是string晌该，如果想傳object對(duì)象也可以，但如果有條件绿渣，可以使用JSON.stringify進(jìn)行轉(zhuǎn)化气笙，這樣保證不會(huì)出bug；
  • targetOrigin：接受你傳遞消息的域名怯晕，可以設(shè)置絕對(duì)路徑，也可以設(shè)置"*"或者"/"缸棵， *表示任意域名都行舟茶，"/"表示只能傳遞給同域域名；
<iframe src="http://tuhao.com" name="sendMessage"></iframe>
//當(dāng)前腳本
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)頁(yè)返回信息
        } else {
            alert(e.data);
        }
    }
}

???????當(dāng)targetOrigin接收到message消息之后,吧凉，會(huì)觸發(fā)message事件，message提供的event對(duì)象上有3個(gè)重要的屬性踏志，data,origin,source：

data：postMessage傳遞進(jìn)來(lái)的值阀捅；
origin：發(fā)送消息的文檔所在的域；
source：發(fā)送消息文檔的window對(duì)象的代理针余，如果是來(lái)自同一個(gè)域饲鄙，則該對(duì)象就是window，可以使用其所有方法圆雁，如果是不同的域忍级，則window只能調(diào)用postMessage()方法返回信息
十九、<frameset>和<iframe>的區(qū)別
  • iframe 和 frameset 都用于html頁(yè)面的框架布局伪朽；
  • <iframe>：iframe 是個(gè)內(nèi)聯(lián)框架轴咱，是在頁(yè)面里生成個(gè)內(nèi)部框架；
    <frameset >：frameset 定義一個(gè)框架集，包含多個(gè)子框架朴肺，每個(gè)框架都有獨(dú)立的文檔窖剑；
<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單獨(dú)使用，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的高度只能通過(guò)frameSet控制，iframe可以自己控制器瘪，不能通過(guò)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>

  • 如果在同一個(gè)頁(yè)面使用了兩個(gè)以上的iframe：
    ???????IE中可以正常顯示，在firefox中只能顯示出第一個(gè)橡疼，使用兩個(gè)以上的frame在IE和firefox中均可正常顯示援所；

  • frame與iframe兩者可以實(shí)現(xiàn)的功能基本相同，不過(guò)Iframe比f(wàn)rame具有更多的靈活性欣除， frame是整個(gè)頁(yè)面的框架住拭，iframe是內(nèi)嵌的網(wǎng)頁(yè)元素，也可以說(shuō)是內(nèi)嵌的框架 :
    ???????iframe標(biāo)記又叫浮動(dòng)幀標(biāo)記历帚，可以用它將一個(gè)HTML文檔嵌入在一個(gè)HTML中顯示滔岳，它和frame標(biāo)記的最大區(qū)別是在網(wǎng)頁(yè)中嵌入的<iframe></iframe>所包含的內(nèi)容與整個(gè)頁(yè)面是一個(gè)整體，而<frame></frame>所包含的內(nèi)容是一個(gè)獨(dú)立的個(gè)體挽牢，是可以獨(dú)立顯示的谱煤，另外，應(yīng)用iframe還可以在同一個(gè)頁(yè)面中多次顯示同一內(nèi)容禽拔，而不必重復(fù)這段內(nèi)容的代碼刘离；

  • iframe 可以放到表格里面，frame 則不行睹栖；

<table> 
 <tr> 
   <td><iframe id="" src=""></iframe></td><td></td> 
 </tr> 
</table>

  • frame必須在frameset里硫惕，而frameset不能與body元素共存，也就說(shuō)有frameset元素的文檔只能是一個(gè)框架集野来，不能有別的東西恼除；

  • iframe放在網(wǎng)頁(yè)的什么地方都行，但是frame只能放到上下左右四個(gè)方向曼氛；

  • iframe是活動(dòng)幀豁辉，而frame是非活動(dòng)幀：

// iframe使用方法如下   
  <iframe scr="sourcefile" frameborder=0 width="width" height="height"></iframe>

  • iframe用起來(lái)更靈活，不需要frame那么多講究搪锣，而且放的位置也可以自己設(shè)秋忙， iframe是內(nèi)嵌的，不過(guò)也有不好的地方构舟，就是位置在不同的瀏覽器和分辨率下有可能不同灰追，有時(shí)會(huì)把本來(lái)好好的頁(yè)面搞得變形堵幽；

  • iframe可以加在網(wǎng)頁(yè)中任何一個(gè)地方，而frame通常做框架頁(yè)弹澎，iframe是一個(gè)網(wǎng)頁(yè)中的子框架朴下，兩網(wǎng)頁(yè)間是父子關(guān)系，frame是框架苦蒿，由多個(gè)并列的網(wǎng)頁(yè)構(gòu)成殴胧；

  • iframe是浮動(dòng)的，就像是浮動(dòng)面板佩迟，而frame是固定的团滥，只能四個(gè)方向上的；

  • <iframe>是被嵌入在網(wǎng)頁(yè)的元素报强，而<frame>用于組成一個(gè)頁(yè)面的多個(gè)框架灸姊，iframe更利于版面的設(shè)計(jì)，frame一條直一條豎的不美觀秉溉，frame的那一條線也可以去掉的呦力惯！只不過(guò)，iframe更方便對(duì)其進(jìn)行數(shù)據(jù)的交換吧召嘶！
    iframe可以放置到你想放的任意位置父晶，控制起來(lái)比f(wàn)rame方便；

  • iframe是內(nèi)部幀弄跌，可以嵌在一個(gè)頁(yè)面里面甲喝，設(shè)置內(nèi)部幀的屬性可以使得整體看上去像是一個(gè)完整的頁(yè)面，而不是由多個(gè)頁(yè)面組成铛只，frame有frame的好處俺猿，比如更多網(wǎng)站，上面放廣告條格仲，左邊放菜單，右邊放內(nèi)容诵冒，這樣上邊和左邊的內(nèi)容都可不動(dòng)凯肋，只刷新右邊頁(yè)面的內(nèi)容，選擇iframe還是frame完全看自己的需求汽馋；

  • 用iframe比用frame少一個(gè)文件（frameSet）侮东，但支持frame的瀏覽器比較多；

  • iframe可以放在表格里,然后ifame設(shè)置成width=100%豹芯，height=100%悄雅，這樣就可以只需修改表格的寬度和高度，有利于排版 铁蹈；

  • 其實(shí)frame是一個(gè)控件宽闲，使用方法和Panle相同；

  • frame是把網(wǎng)頁(yè)分成多個(gè)頁(yè)面的頁(yè)面。它要有一個(gè)框架集頁(yè)面frameset容诬，iframe是一個(gè)浮動(dòng)的框架娩梨，就是在你的頁(yè)面里再加上一個(gè)頁(yè)面；

  • <frame>用來(lái)把頁(yè)面橫著或豎著切開览徒，<iframe>用來(lái)在頁(yè)面中插入一個(gè)矩形的小窗口狈定；

  • frame一般用來(lái)設(shè)置頁(yè)面布局，將整個(gè)頁(yè)面分成規(guī)則的幾塊习蓬，每一塊里面包含一個(gè)新頁(yè)面纽什，iframe用來(lái)在頁(yè)面的任何地方插入一個(gè)新的頁(yè)面，因此躲叼，frame用來(lái)控制頁(yè)面格式芦缰，比如一本書，左邊是章節(jié)目錄押赊，右邊是正文饺藤，正文很長(zhǎng)，看的時(shí)候要拖動(dòng)流礁，但又不想目錄也被拖動(dòng)得看不到了涕俗，因此最好將頁(yè)面用frame分成規(guī)則的2頁(yè)，一左一右神帅；而iframe則更靈活再姑，不要求將整個(gè)頁(yè)面劃分，可以在頁(yè)面任何地方用iframe嵌入新的頁(yè)面找御；

  • <frame>用于全頁(yè)面元镀；
    <iframe>只用于局部；

參考鏈接：
Web前端之iframe詳解
frame和iframe的區(qū)別

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末霎桅，一起剝皮案震驚了整個(gè)濱河市栖疑，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌滔驶，老刑警劉巖遇革，帶你破解...
    沈念sama閱讀 219,589評(píng)論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異揭糕，居然都是意外死亡徘钥，警方通過(guò)查閱死者的電腦和手機(jī)蝗蛙，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3贊 396
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門蹈矮，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)技俐，“玉大人，你說(shuō)我怎么就攤上這事吏口⊙偃荩” “怎么了冰更？”我有些...
    開封第一講書人閱讀 165,933評(píng)論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)嫩海。 經(jīng)常有香客問(wèn)我冬殃，道長(zhǎng)，這世上最難降的妖魔是什么叁怪？ 我笑而不...
    開封第一講書人閱讀 58,976評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任审葬，我火速辦了婚禮，結(jié)果婚禮上奕谭，老公的妹妹穿的比我還像新娘涣觉。我一直安慰自己，他們只是感情好血柳，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布官册。 她就那樣靜靜地躺著，像睡著了一般难捌。 火紅的嫁衣襯著肌膚如雪膝宁。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,775評(píng)論 1贊 307
  • 城市分裂傳說(shuō)
    那天根吁，我揣著相機(jī)與錄音员淫，去河邊找鬼。 笑死击敌，一個(gè)胖子當(dāng)著我的面吹牛介返，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播沃斤，決...
    沈念sama閱讀 40,474評(píng)論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼圣蝎，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了衡瓶？” 一聲冷哼從身側(cè)響起徘公，我...
    開封第一講書人閱讀 39,359評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎哮针，沒(méi)想到半個(gè)月后步淹，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1贊 317
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡诚撵，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了键闺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寿烟。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1贊 351
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖辛燥，靈堂內(nèi)的尸體忽然破棺而出筛武，到底是詐尸還是另有隱情缝其，我是刑警寧澤，帶...
    沈念sama閱讀 35,826評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布徘六，位于F島的核電站内边，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏待锈。R本人自食惡果不足惜漠其，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3贊 331
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望竿音。 院中可真熱鬧和屎，春花似錦、人聲如沸春瞬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)宽气。三九已至随常，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間萄涯，已是汗流浹背绪氛。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留窃判，地道東北人钞楼。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3贊 373
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像袄琳，于是被迫代替她去往敵國(guó)和親询件。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2贊 356

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5唆樊？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)宛琅。 注意：講述HT...
    kismetajun閱讀 27,490評(píng)論 1贊 45
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁(yè)的形式展示給用戶的，因此網(wǎng)頁(yè)是網(wǎng)絡(luò)信息傳遞的載體逗旁。網(wǎng)頁(yè)文件是用...
    阿啊阿吖丁閱讀 3,899評(píng)論 0贊 0
  • 前端開發(fā)面試知識(shí)點(diǎn)大綱： HTML&CSS： 對(duì)Web標(biāo)準(zhǔn)的理解嘿辟、瀏覽器內(nèi)核差異、兼容性片效、hack红伦、CSS基本功：...
    秀才JaneBook閱讀 2,371評(píng)論 0贊 25
  • $HTML， HTTP淀衣，web綜合問(wèn)題 1昙读、前端需要注意哪些SEO 2、 的title和alt有什么區(qū)別 3膨桥、HT...
    Hebborn_hb閱讀 4,602評(píng)論 0贊 20
  • 領(lǐng)導(dǎo)力是一個(gè)特別有意思的東西蛮浑。 在過(guò)去一年中唠叛，除了常說(shuō)的leader具備的那幾個(gè)要素，在我看來(lái)沮稚，一個(gè)leader還...
    閃電丸閱讀 204評(píng)論 0贊 0