1. iframe基本內(nèi)涵

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

<iframe src="demo_iframe_sandbox.htm"></iframe>

• frame中還可以設(shè)置些什么屬性

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

我們通常使用iframe最基本的特性，就是能自由操作iframe和父框架的內(nèi)容(DOM). 但前提條件是同域. 如果跨域頂多只能實(shí)現(xiàn)頁面跳轉(zhuǎn)window.location.href.
那什么是同域/ 什么是跨域呢?
就是判斷你的url首部是否一樣进倍，下面會有講解，這里只是提及购对。
同域不同域的問題:

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)橥颍疙撁婵梢詫ψ禹撁孢M(jìn)行改寫,反之亦然骡苞。
使用B時(shí)垂蜗，不同域，父頁面沒有權(quán)限改動子頁面,但可以實(shí)現(xiàn)頁面的跳轉(zhuǎn)

主頁面和iframe同域時(shí)解幽，我們可以干些什么贴见。

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

主要的兩個(gè)API就是contentWindow,和contentDocument
iframe.contentWindow, 獲取iframe的window對象
iframe.contentDocument, 獲取iframe的document對象
這兩個(gè)API只是DOM節(jié)點(diǎn)提供的方式(即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獲取.

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

其實(shí)window.frames['ifr1']返回的就是window對象片部，即
window.frames['ifr1']===window
這里就看你想用哪一種方式獲取window對象，兩者都行霜定，不過本人更傾向于第二種使用frames[xxx].因?yàn)榈涤疲帜干侔 然后，你就可以操控iframe里面的DOM內(nèi)容望浩。

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

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

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

iframe長輪詢

如果寫過ajax的童鞋丰滑，應(yīng)該知道，長輪詢就是在ajax的readyState = 4的時(shí)倒庵，再次執(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.οnlοad= 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);
    }

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

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

網(wǎng)頁為了賺錢，引入廣告是很正常的事了髓迎。通常的做法就是使用iframe峦朗，引入廣告地址就可以了，然后根據(jù)廣告內(nèi)容設(shè)置相應(yīng)的顯示框排龄。但是波势，為什么是使用iframe來進(jìn)行設(shè)置，而不是在某個(gè)div下嵌套就行了呢涣雕？
要知道艰亮，廣告是與原文無關(guān)的，這樣硬編碼進(jìn)去挣郭，會造成網(wǎng)頁布局的紊亂,而且,這樣勢必需要引入額外的css和js文件迄埃，極大的降低了網(wǎng)頁的安全性。 這些所有的弊端兑障，都可以使用iframe進(jìn)行解決侄非。
我們通辰锻簦可以將iframe理解為一個(gè)沙盒，里面的內(nèi)容能夠被top window 完全控制逞怨，而且者疤，主頁的css樣式是不會入侵iframe里面的樣式，這些都給iframe的廣告命運(yùn)埋下伏筆叠赦【月恚可以看一下各大站點(diǎn)是否都在某處放了些廣告，以維持生計(jì)比如:W3School
但除秀，默認(rèn)情況下糯累，iframe是不適合做展示信息的，所以我們需要對其進(jìn)行decorate.

自適應(yīng)iframe

認(rèn)情況下册踩，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;

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

例子:

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

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

iframe安全性探索

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

防嵌套網(wǎng)頁

比如，最出名的clickhacking就是使用iframe來 攔截click事件鸟整。因?yàn)閕frame享有著click的最優(yōu)先權(quán)引镊，當(dāng)有人在偽造的主頁中進(jìn)行點(diǎn)擊的話，如果點(diǎn)在iframe上篮条，則會默認(rèn)是在操作iframe的頁面弟头。 所以，釣魚網(wǎng)站就是使用這個(gè)技術(shù)涉茧，通過誘導(dǎo)用戶進(jìn)行點(diǎn)擊赴恨，比如，設(shè)計(jì)一個(gè)"妹妹寂寞了"等之類的網(wǎng)頁，誘導(dǎo)用戶點(diǎn)擊，但實(shí)際結(jié)果失受，你看到的不是"妹妹",而是被惡意微博吸粉勺阐。
所以马昨，為了防止網(wǎng)站被釣魚诫龙，可以使用window.top來防止你的網(wǎng)頁被iframe.

//iframe2.html
if(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)頁不同域名的話，上述就會報(bào)錯(cuò)绢馍。
所以向瓷，這里可以使用try...catch...進(jìn)行錯(cuò)誤捕獲。如果發(fā)生錯(cuò)誤痕貌，則說明不同域风罩，表示你的頁面被盜用了《娉恚可能有些瀏覽器這樣寫是不會報(bào)錯(cuò)超升，所以需要降級處理。
這時(shí)候再進(jìn)行跳轉(zhuǎn)即可.

try{
　　top.location.hostname;  //檢測是否出錯(cuò)
　　//如果沒有出錯(cuò)哺徊，則降級處理
　　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)限進(jìn)行設(shè)置.

X-Frame-Options

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

DENY：當(dāng)前頁面不能被嵌套iframe里轿钠，即便是在相同域名的頁面中嵌套也不允許,也不允許網(wǎng)頁中有嵌套iframe
SAMEORIGIN：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其實(shí)就是將前端js對iframe的把控交給服務(wù)器來進(jìn)行處理。

//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

該屬性是對頁面的iframe進(jìn)行一個(gè)主要限制贷腕，不過背镇，涉及iframe的header可不止這一個(gè)，另外還有一個(gè)Content Security Policy, 他同樣也可以對iframe進(jìn)行限制泽裳，而且瞒斩，他應(yīng)該是以后網(wǎng)頁安全防護(hù)的主流。

CSP之頁面防護(hù)

和X-Frames-Options一樣涮总，都需要在服務(wù)器端設(shè)置好相關(guān)的Header. CSP 的作用胸囱， 真的是太大了，他能夠極大的防止你的頁面被XSS攻擊妹卿，而且可以制定js,css,img等相關(guān)資源的origin旺矾，防止被惡意注入蔑鹦。不過他的兼容性，也是渣的一逼箕宙。目前支持Edge12+ 以及 IE10+嚎朽。
而且目前市面上，流行的是3種CSP頭柬帕，以及各種瀏覽器的兼容性

使用主要是在后端服務(wù)器上配置哟忍，在前端，我們可以觀察Response Header 里是否有這樣的一個(gè)Header:

Content-Security-Policy: default-src 'self'
這就表明陷寝，你的網(wǎng)頁是啟用CSP的锅很。通常我們可以在CSP后配置各種指定資源路徑，有

 default-src,
script-src,
style-src,
img-src,
connect-src,
font-src,
object-src,
media-src,
sandbox,
child-src,
...

如果你未指定的話凤跑，則是使用default-src規(guī)定的加載策略.
默認(rèn)配置就是同域: default-src "self".
這里和iframe有一點(diǎn)瓜葛的就是 child-src 和 sandbox.
child-src就是用來指定iframe的有效加載路徑爆安。其實(shí)和X-Frame-Options中配置allow-origin是一個(gè)道理。不過,allow-origin 沒有得到廠商們的支持仔引。
而扔仓，sandbox其實(shí)就和iframe的sandbox屬性（下文介紹）,是一樣一樣的，他可以規(guī)定來源能夠帶有什么權(quán)限.
來個(gè)demo:

Content-Security-Policy: child-src 'self' http://example.com; sandbox allow-forms allow-same-origin

此時(shí)咖耘，iframe的src就只能加載同域和example.com頁面翘簇。 最后再補(bǔ)充一點(diǎn): 使用CSP 能夠很好的防止XSS攻擊，原理就是CSP會默認(rèn)escape掉內(nèi)聯(lián)樣式和腳本儿倒，以及eval執(zhí)行版保。但是，你可以使用srcipt-src進(jìn)行降低限制.

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

如果想更深入的了解CSP,可以參閱:CSP,中文CSP,H5rock之CSP
ok, 上面基本上就是防止自己頁面被嵌套而做的一些安全防護(hù)工作夫否。 當(dāng)然彻犁，我們面臨的安全問題還有一個(gè)，就是當(dāng)iframe別人的頁面時(shí)凰慈，我們需要對其進(jìn)行安全設(shè)限袖裕，雖然，跨域時(shí)iframe的安全性會大很多溉瓶，但是，互聯(lián)網(wǎng)是沒有安全的地方谤民。在以前堰酿，我們會進(jìn)行各種trick來防止自己的頁面被污染，現(xiàn)在h5提供的一個(gè)新屬性sandbox可以很好的解決這個(gè)問題张足。

sandbox

sandbox就是用來給指定iframe設(shè)置一個(gè)沙盒模型限制iframe的更多權(quán)限.
sandbox是h5的一個(gè)新屬性,IE10+支持(md~).
啟用方式就是使用sandbox屬性:

 <iframe sandbox src="..."></iframe>

這樣會對iframe頁面進(jìn)行一系列的限制:

1. script腳本不能執(zhí)行
2. 不能發(fā)送ajax請求
3. 不能使用本地存儲触创，即localStorage,cookie等
4. 不能創(chuàng)建新的彈窗和window
5. 不能發(fā)送表單
6. 不能加載額外插件比如flash等

看到這里，我也是醉了为牍。 好好的一個(gè)iframe哼绑，你這樣是不是有點(diǎn)過分了岩馍。 不過，你可以放寬一點(diǎn)權(quán)限抖韩。在sandbox里面進(jìn)行一些簡單設(shè)置

<iframe sandbox="allow-same-origin" src="..."></iframe>

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

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

<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="..."></iframe>

這樣茂浮，就可以保證js腳本的執(zhí)行双谆，但是禁止iframe里的javascript執(zhí)行top.location = self.location。
哎席揽，其實(shí)顽馋，iframe的安全問題還是超級有的。比如location劫持幌羞，Refers檢查等寸谜。 不過目前而言，知道怎么簡單的做一些安全措施就over了属桦，白帽子們會幫我們測試的熊痴。

resolve iframe跨域

iframe就是一個(gè)隔離沙盒，相當(dāng)于我們在一個(gè)頁面內(nèi)可以操控很多個(gè)標(biāo)簽頁一樣地啰。如果踩坑的童鞋應(yīng)該知道愁拭，iframe的解決跨域也是很有套套的。
首先我們需要明確什么是跨域亏吝。
瀏覽器判斷你跨沒跨域岭埠，主要根據(jù)兩個(gè)點(diǎn)。 一個(gè)是你網(wǎng)頁的協(xié)議(protocol)蔚鸥，一個(gè)就是你的host是否相同惜论，即，就是url的首部:

window.location.protocol +window.location.host
需要強(qiáng)調(diào)的是止喷，url首部必須一樣馆类，比如:二級域名或者IP地址，都算是跨域.

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

對于第二種方式的跨域（主域相同而子域不同）,可以使用iframe進(jìn)行解決。
在兩個(gè)不同子域下(某一方使用iframe嵌套在另一方)预愤，
即:
http://www.foo.com/a.html和http://script.foo.com/b.html
兩個(gè)文件中分別加上document.domain = ‘foo.com’,指定相同的主域沟于，然后,兩個(gè)文檔就可以進(jìn)行交互。

//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. 你可以手動更改植康，但是最多只能設(shè)置為主域名旷太。 通常，主域名就是指不帶www的hostname, 比如: foo.com , baidu.com 。 如果供璧，帶上www或者其他的前綴存崖，就是二級域名或者多級域名。通過上述設(shè)置睡毒，相同的domain之后来惧，就可以進(jìn)行同域的相關(guān)操作。另外還可以使用iframe和location.hash吕嘀，不過由于技術(shù)out了违寞，這里就不做介紹了。

H5的CDM跨域與iframe

如果你設(shè)置的iframe的域名和你top window的域名完全不同偶房。 則可以使用CDM(cross document messaging)進(jìn)行跨域消息的傳遞趁曼。該API的兼容性較好 ie8+都支持.
發(fā)送消息: 使用postmessage方法
接受消息: 監(jiān)聽message事件

postmessage

該方法掛載到window對象上，即棕洋，使用window.postmessage()調(diào)用.
該方法接受兩個(gè)參數(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進(jìn)行轉(zhuǎn)化。這樣能保證不會出bug.
targetOrigin: 接受你傳遞消息的域名愧捕，可以設(shè)置絕對路徑奢驯，也可以設(shè)置""或者"/"。 表示任意域名都行次绘，"/"表示只能傳遞給同域域名瘪阁。

來個(gè)栗子:

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

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

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