iframe,我們來談一談_html/css

某大牛說: “iframe安全性太差，請盡量減少使用”

…

wtf, 你們知不知道你們這樣澆滅了多少孩紙學(xué)習(xí)iframe的熱情和決心。 雖然，你們這樣說的我竟無法反駁，但是iframe強大功能是不容忽視的。 可以看看各大郵箱網(wǎng)站是否還在使用iframe，查查知乎 iframe . iframe不死，我心不滅?，F(xiàn)在給大家安利一下iframe.

iframe基本內(nèi)涵

通常我們使用iframe直接直接在頁面嵌套iframe標(biāo)簽指定src就可以了。

但是，有追求的我們，并不是想要這么low的iframe. 我們來看看在iframe中還可以設(shè)置些什么屬性

iframe常用屬性:1.frameborder:是否顯示邊框，1(yes),0(no)2.height:框架作為一個普通元素的高度，建議在使用css設(shè)置。3.width:框架作為一個普通元素的寬度，建議使用css設(shè)置。4.name:框架的名稱，window.frames[name]時專用的屬性。5.scrolling:框架的是否滾動。yes,no,auto。6.src：內(nèi)框架的地址，可以使頁面地址，也可以是圖片的地址。7.srcdoc , 用來替代原來HTML body里面的內(nèi)容。但是IE不支持, 不過也沒什么卵用8.sandbox: 對iframe進行一些列限制，IE10+支持

上面一些tag，會在下文進行穿插說明，單個不好說。

我們通常使用iframe最基本的特性，就是能自由操作iframe和父框架的內(nèi)容(DOM). 但前提條件是同域. 如果跨域頂多只能實現(xiàn)頁面跳轉(zhuǎn) window.location.href .

那什么是同域/ 什么是跨域呢?

就是判斷你的url首部是否一樣，下面會有講解，這里只是提及。

同域不同域的問題:

A:B:

使用A時，因為同域，父頁面可以對子頁面進行改寫,反之亦然。

使用B時，不同域，父頁面沒有權(quán)限改動子頁面,但可以實現(xiàn)頁面的跳轉(zhuǎn)

這里，我們先從簡單的開始，當(dāng)主頁面和iframe同域時，我們可以 干 些什么。

獲取iframe里的內(nèi)容

主要的兩個API就是contentWindow,和contentDocument

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

實際情況如:

另外更簡單的方式是，結(jié)合Name屬性，通過window提供的frames獲取.

 
Your browser does not support iframes.

其實window.frames[‘ifr1′]返回的就是window對象，即

window.frames['ifr1']===window

這里就看你想用哪一種方式獲取window對象，兩者都行，不過本人更傾向于第二種使用frames[xxx].因為，字母少啊喂~ 然后，你就可以操控iframe里面的DOM內(nèi)容。

在iframe中獲取父級內(nèi)容

同理，在同域下，父頁面可以獲取子iframe的內(nèi)容，那么子iframe同樣也能操作父頁面內(nèi)容。在iframe中，可以通過在window上掛載的幾個API進行獲取.

window.parent 獲取上一級的window對象，如果還是iframe則是該iframe的window對象window.top 獲取最頂級容器的window對象，即，就是你打開頁面的文檔window.self 返回自身window的引用。可以理解 window===window.self(腦殘)

如圖: 來個栗子~

ok, 獲取了之后，我們就可以進行相關(guān)操作了。 在同域的iframe中，我們可以巧妙的使用iframe的黑科技來實現(xiàn)一些trick.

iframe的輪詢

話說在很久很久以前，我們實現(xiàn)異步發(fā)送請求是使用iframe實現(xiàn)的~!

怎么可能!!!

真的史料為證(自行g(shù)oogle), 那時候為了不跳轉(zhuǎn)頁面，提交表單時是使用iframe提交的?，F(xiàn)在，前端發(fā)展尼瑪真快，websocket,SSE,ajax等，逆天skill的出現(xiàn)，顛覆了iframe, 現(xiàn)在基本上只能活在IE8,9的瀏覽器內(nèi)了。 但是，寶寶以為這樣就可以不用了解iframe了,而現(xiàn)實就是這么殘酷，我們目前還需要兼容IE8+。所以，iframe 實現(xiàn)長輪詢和長連接的trick 我們還是需要涉獵滴。

iframe長輪詢

如果寫過ajax的童鞋，應(yīng)該知道，長輪詢就是在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);  iloca.reload(); //刷新頁面,再次獲取信息，并且會觸發(fā)onload函數(shù) },2000); }

這樣就可以實現(xiàn)ajax的長輪詢的效果。 當(dāng)然，這里只是使用reload進行獲取，你也可以添加iframe和刪除iframe的方式，進行發(fā)送信息，這些都是根據(jù)具體場景應(yīng)用的。另外在iframe中還可以實現(xiàn)異步加載js文件，不過，iframe和主頁是共享連接池的，所以還是很蛋疼的，現(xiàn)在基本上都被XHR和hard calllback取締了，這里也不過多介紹了。

自適應(yīng)iframe之蜜汁廣告

網(wǎng)頁為了賺錢，引入廣告是很正常的事了。通常的做法就是使用iframe，引入廣告地址就可以了，然后根據(jù)廣告內(nèi)容設(shè)置相應(yīng)的顯示框。但是，為什么是使用iframe來進行設(shè)置，而不是在某個div下嵌套就行了呢？

要知道，廣告是與原文無關(guān)的，這樣硬編碼進去，會造成網(wǎng)頁布局的紊亂,而且,這樣勢必需要引入額外的css和js文件，極大的降低了網(wǎng)頁的安全性。 這些所有的弊端，都可以使用iframe進行解決。

我們通?？梢詫frame理解為一個沙盒，里面的內(nèi)容能夠被top window 完全控制，而且，主頁的css樣式是不會入侵iframe里面的樣式，這些都給iframe的廣告命運埋下伏筆。可以看一下各大站點是否都在某處放了些廣告，以維持生計比如: W3School

但，默認(rèn)情況下，iframe是不適合做展示信息的，所以我們需要對其進行decorate.

自適應(yīng)iframe

默認(rèn)情況下，iframe會自帶滾動條，不會全屏.如果你想自適應(yīng)iframe的話:第一步：去掉滾動條

第二步,設(shè)置iframe的高為body的高

var iwindow = iframe.contentWindow;var idoc = iwindow.document;iframe.height = idoc.body.offsetHeight;

另外,還可以添加其它的裝飾屬性:

看個例子:

你可以直接寫在內(nèi)聯(lián)里面，也可以在css里面定義，不過對于廣告iframe來說，樣式寫在屬性中，是best pratice.

iframe安全性探索

iframe出現(xiàn)安全性有兩個方面，一個是你的網(wǎng)頁被別人iframe,一個是你iframe別人的網(wǎng)頁。 當(dāng)你的網(wǎng)頁被別人iframe時，比較蛋疼的是被釣魚網(wǎng)站利用，然后victim+s留言逼逼你。真.簡直了。 所以為了防止頁面被一些 不法分子 利用，我們需要做好安全性措施。

防嵌套網(wǎng)頁

比如，最出名的 clickhacking 就是使用iframe來 攔截click事件。因為iframe享有著click的最優(yōu)先權(quán)，當(dāng)有人在偽造的主頁中進行點擊的話，如果點在iframe上，則會默認(rèn)是在操作iframe的頁面。 所以，釣魚網(wǎng)站就是使用這個技術(shù)，通過誘導(dǎo)用戶進行點擊，比如，設(shè)計一個”妹妹寂寞了”等之類的網(wǎng)頁，誘導(dǎo)用戶點擊，但實際結(jié)果，你看到的不是”妹妹”,而是被惡意微博吸粉。

所以，為了防止網(wǎng)站被釣魚，可以使用window.top來防止你的網(wǎng)頁被iframe.

//iframe2.htmlif(window != window.top){ window.top.location.href = correctURL;}

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

if (top.location.host != window.location.host) {　　top.location.href = window.location.href;}

當(dāng)然，如果你網(wǎng)頁不同域名的話，上述就會報錯。

所以，這里可以使用try…catch…進行錯誤捕獲。如果發(fā)生錯誤，則說明不同域，表示你的頁面被盜用了。可能有些瀏覽器這樣寫是不會報錯，所以需要降級處理。

這時候再進行跳轉(zhuǎn)即可.

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;}

這只是瀏覽器端，對iframe頁面的權(quán)限做出相關(guān)的設(shè)置。我們還可以在服務(wù)器上，對使用iframe的權(quán)限進行設(shè)置.

X-Frame-Options

X-Frame-Options是一個相應(yīng)頭，主要是描述服務(wù)器的網(wǎng)頁資源的iframe權(quán)限。目前的支持度是IE8+(已經(jīng)很好了啊喂)有3個選項:

DENY：當(dāng)前頁面不能被嵌套iframe里，即便是在相同域名的頁面中嵌套也不允許,也不允許網(wǎng)頁中有嵌套iframeSAMEORIGIN：iframe頁面的地址只能為同源域名下的頁面ALLOW-FROM：可以在指定的origin url的iframe中加載

簡單實例:

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不支持

X-Frame-Options其實就是將前端js對iframe的把控交給服務(wù)器來進行處理。

//jsif(window != window.top){ window.top.location.href = window.location.href;}//等價于X-Frame-Options: DENY//jsif (top.location.hostname != window.location.hostname) { 　　　　top.location.href =window.location.href;}//等價于X-Frame-Options: SAMEORIGIN

ok, 上面基本上就是防止自己頁面被嵌套而做的一些安全防護工作。 當(dāng)然，我們面臨的安全問題還有一個，就是當(dāng)iframe別人的頁面時，我們需要對其進行安全設(shè)限，雖然，跨域時iframe的安全性會大很多，但是，互聯(lián)網(wǎng)是沒有安全的地方。在以前，我們會進行各種trick來防止自己的頁面被污染，現(xiàn)在h5提供的一個新屬性sandbox可以很好的解決這個問題。

sandbox

sandbox就是用來給指定iframe設(shè)置一個沙盒模型限制iframe的更多權(quán)限.

sandbox是h5的一個新屬性,IE10+支持(md~).

啟用方式就是使用sandbox屬性:

這樣會對iframe頁面進行一系列的限制:

1. script腳本不能執(zhí)行

2. 不能發(fā)送ajax請求

3. 不能使用本地存儲，即localStorage,cookie等

4. 不能創(chuàng)建新的彈窗和window

5. 不能發(fā)送表單

6. 不能加載額外插件比如flash等

   看到這里，我也是醉了。 好好的一個iframe，你這樣是不是有點過分了。 不過，你可以放寬一點權(quán)限。在sandbox里面進行一些簡單設(shè)置

常用的配置項有:

可以通過在sandbox里，添加允許進行的權(quán)限.

這樣，就可以保證js腳本的執(zhí)行，但是禁止iframe里的javascript執(zhí)行top.location = self.location。

哎，其實，iframe的安全問題還是超級有的。比如l ocation劫持，Refers檢查 等。 不過目前而言，知道怎么簡單的做一些安全措施就over了，白帽子們會幫我們測試的。

resolve iframe跨域

iframe就是一個隔離沙盒，相當(dāng)于我們在一個頁面內(nèi)可以操控很多個標(biāo)簽頁一樣。如果踩坑的童鞋應(yīng)該知道，iframe的解決跨域也是很有套套的。

首先我們需要明確什么是跨域。

瀏覽器判斷你跨沒跨域，主要根據(jù)兩個點。 一個是你網(wǎng)頁的協(xié)議(protocol)，一個就是你的host是否相同，即，就是url的首部:

window.location.protocol +window.location.host

具體的例子就是:

需要強調(diào)的是，url首部必須一樣，比如:二級域名或者IP地址，都算是跨域.

//域名和域名對應(yīng)ip, 跨域http://www.a.com/a.jshttp://70.32.92.74/b.js//統(tǒng)一域名，不同二級域名。 跨域http://www.a.com/a.jshttp://a.com/b.js

對于第二種方式的跨域（主域相同而子域不同）,可以使用iframe進行解決。

在兩個不同子域下(某一方使用iframe嵌套在另一方)，

即:

http: //www.foo.com/a.html和http: //script.foo.com/b.html

兩個文件中分別加上document.domain = ‘foo.com’,指定相同的主域，然后,兩個文檔就可以進行交互。

//b.html是以iframe的形式嵌套在a.html中//www.foo.com上的a.htmldocument.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.htmldocument.domain = 'foo.com';

默認(rèn)情況下document.domain 是指window.location.hostname. 你可以手動更改，但是最多只能設(shè)置為主域名。 通常，主域名就是指不帶www的hostname, 比如: foo.com , baidu.com 。 如果，帶上www或者其他的前綴，就是二級域名或者多級域名。通過上述設(shè)置，相同的domain之后，就可以進行同域的相關(guān)操作。另外還可以使用iframe和location.hash，不過由于技術(shù)out了，這里就不做介紹了。

H5的CDM跨域與iframe

如果你設(shè)置的iframe的域名和你top window的域名完全不同。 則可以使用CDM(cross document messaging)進行跨域消息的傳遞。該API的兼容性較好 ie8+都支持.

發(fā)送消息: 使用postmessage方法

接受消息: 監(jiān)聽message事件

postmessage

該方法掛載到window對象上，即，使用window.postmessage()調(diào)用.

該方法接受兩個參數(shù):postMessage(message, targetOrigin):

message: 就是傳遞給iframe的內(nèi)容, 通常是string,如果你想傳object對象也可以。不過使用前請參考這一句話:

Objects listed in transfer are transferred, not just cloned, meaning that they are no longer usable on the sending side.

意思就是，希望親愛的不要直接傳Object。 如果有條件，可以使用是JSON.stringify進行轉(zhuǎn)化。這樣能保證不會出bug.

targetOrigin: 接受你傳遞消息的域名，可以設(shè)置絕對路徑，也可以設(shè)置” “或者”/”。 表示任意域名都行，”/”表示只能傳遞給同域域名。

來個栗子:

//當(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)頁返回信息 } else {  alert(e.data); } }}

當(dāng)targetOrigin接受到message消息之后,會觸發(fā)message事件。 message提供的event對象上有3個重要的屬性，data,origin,source.

data：postMessage傳遞進來的值origin：發(fā)送消息的文檔所在的域source：發(fā)送消息文檔的window對象的代理，如果是來自同一個域，則該對象就是window，可以使用其所有方法，如果是不同的域，則window只能調(diào)用postMessage()方法返回信息

屬性的使用方法，如上頭那個demo 說的。 很貼切， 很完美~

finally iframe

iframe的大概我們差不多了解了。 想說的是，iframe 在后面會越用越少的。但是應(yīng)該是不會被w3c標(biāo)準(zhǔn)廢除的。到是前端的發(fā)展，真尼瑪太快了，每過一段時間，一個新工具，新技術(shù)的出現(xiàn)，好到是好，不過學(xué)的真心蛋疼。不過，我們要以一個大前端的姿態(tài)要求我們，md,現(xiàn)在不學(xué)，那什么時候?qū)W~

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com