在開發(fā)過程中會遇到需要 在一個(gè)頁面中嵌套另外一個(gè)頁面，就要使用到框架 標(biāo)簽，然后指定src就可以了。
基本語法：
<iframe src="需要展示的網(wǎng)站頁面的URL"></iframe>
用法舉例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<body>
<iframe src="https://www.csdn.net/?spm=1001.2101.3001.4476"></iframe>
</body>
</html>
運(yùn)行后效果圖：
但是我們需要更好看點(diǎn)的iframe. 我們來看看在iframe中還可以設(shè)置些什么屬性
| 屬性 | 值 |
|---|---|
| frameborder | 是否顯示邊框，1(yes),0(no) |
| height | 框架作為一個(gè)普通元素的高度，建議在使用css設(shè)置 |
| width | 框架作為一個(gè)普通元素的寬度，建議使用css設(shè)置。 |
| name | 框架的名稱，window.frames[name]時(shí)專用的屬性。 |
| scrolling | 框架的是否滾動(dòng)。yes,no,auto。 |
| src | 內(nèi)框架的地址，可以使頁面地址，也可以是圖片的地址。 |
| srcdoc | 用來替代原來HTML body里面的內(nèi)容。 |
| sandbox | 對iframe進(jìn)行一些列限制，IE10+支持 |
附加說明：
1. 當(dāng)frameborder=“0”，表示關(guān)閉邊框；frameborder=“1”，表示有邊框(默認(rèn)=1)，出于實(shí)用性方面的原因，最好不用設(shè)置該屬性，請使用 CSS 來應(yīng)用邊框樣式和顏色。
2. 寬高可以是以像素計(jì)的高度值（比如 "100），也可以是以包含元素百分比計(jì)的高度值（比如 “20%”），注意設(shè)置百分比的時(shí)候，它的父元素也就是外圍必須要指定高度，否則百分比不生效。
3. scrolling默認(rèn)的是auto，也就是有滾動(dòng)條。如果要想隱藏iframe出現(xiàn)的滾動(dòng)條，可以使用scrolling="no"隱藏滾動(dòng)條。
iframe如何處理寬高和主頁面不完美融合問題（calc（）方法）
內(nèi)嵌頁面的時(shí)候，很容易發(fā)現(xiàn)內(nèi)嵌頁面很難和主頁面完美融合，那么我們在寬高方面需要用到calc方法：
從字面看我們可以把它理解為一個(gè)function函數(shù)。其實(shí)calc就是英文單詞calculate(計(jì)算)的縮寫；它是一個(gè)css3新增的功能，可以用來指定元素的長度，動(dòng)態(tài)計(jì)算長度值。
<style>
nav{
background-color: antiquewhite;
height: 30px;
}
body,html{
height: 100%;
}
.ifr{
width: 100%;
height: calc(100% - 30px);
}
</style>
<body>
<nav>
<a href="">我是導(dǎo)航欄1</a>
<a href="">我是導(dǎo)航欄2</a>
<a href="">我是導(dǎo)航欄3</a>
</nav>
<!-- src 是嵌套頁面的網(wǎng)址 -->
<!-- frameborder是嵌套頁面的一個(gè)邊距 一般設(shè)置為0 -->
<iframe src="./fuyemian.html" frameborder="0" class="ifr"></iframe>
</body>
頁面嵌套的效果如下：
我們通常使用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)橥?，父頁面可以對子頁面進(jìn)行改寫,反之亦然。
使用B時(shí)，不同域，父頁面沒有權(quán)限改動(dòng)子頁面,但可以實(shí)現(xiàn)頁面的跳轉(zhuǎn)
這里，我們先從簡單的開始，當(dāng)主頁面和iframe同域時(shí)，我們可以干 些什么。
獲取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對象，兩者都行，都可以操控iframe里面的DOM內(nèi)容。
在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(腦殘)
自適應(yīng)iframe之網(wǎng)頁廣告
網(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)行解決。
我們通?？梢詫frame理解為一個(gè)沙盒，里面的內(nèi)容能夠被top window 完全控制，而且，主頁的css樣式是不會入侵iframe里面的樣式，這些都給iframe的廣告命運(yùn)埋下伏筆?？梢钥匆幌赂鞔笳军c(diǎn)是否都在某處放了些廣告，以維持生計(jì)
比如:W3School
但，默認(rèn)情況下，iframe是不適合做展示信息的，所以我們需要對其進(jìn)行裝飾.
自適應(yīng)iframe
默認(rèn)情況下，iframe會自帶滾動(dòng)條，不會全屏.如果你想自適應(yīng)iframe的話:
第一步：去掉滾動(dòng)條
<iframe src="http://www.baidu.com" id="iframe1" scrolling="no"></iframe>
第二步,設(shè)置iframe的高為body的高
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;
另外,還可以添加其它的裝飾屬性:
| 屬性 | 效果 |
|---|---|
| allowtransparency | true or false ----是否允許iframe設(shè)置為透明，默認(rèn)為false |
| allowfullscreen | true or false----是否允許iframe全屏，默認(rèn)為false |
看個(gè)例子：
<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來說，樣式寫在屬性中，是最好的。
iframe安全性探索–防嵌套網(wǎng)頁
iframe出現(xiàn)安全性有兩個(gè)方面，一個(gè)是你的網(wǎng)頁被別人iframe,一個(gè)是你iframe別人的網(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ò)誤，則說明不同域，表示你的頁面被盜用了?？赡苡行g覽器這樣寫是不會報(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+，有3個(gè)選項(xiàng)：
1. X-Frame-Options: DENY 拒絕任何iframe的嵌套請求
2. X-Frame-Options: SAMEORIGIN 只允許同源請求，例如網(wǎng)頁為 foo.com/123.php，則 foo.com 底下的所有網(wǎng)頁可以嵌入此網(wǎng)頁，但是 foo.com 以外的網(wǎng)頁不能嵌入
3. 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ù)的主流。
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. 你可以手動(dòng)更改，但是最多只能設(shè)置為主域名。 通常，主域名就是指不帶www的hostname, 比如: foo.com , baidu.com 。 如果，帶上www或者其他的前綴，就是二級域名或者多級域名。通過上述設(shè)置，相同的domain之后，就可以進(jìn)行同域的相關(guān)操作。另外還可以使用iframe和location.hash，不過由于技術(shù)out了，這里就不做介紹了。文章來源：http://www.zghlxwxcb.cn/news/detail-780943.html
原文鏈接：https://blog.csdn.net/qq_27009517/article/details/124476405文章來源地址http://www.zghlxwxcb.cn/news/detail-780943.html
到了這里，關(guān)于iframe嵌套其它網(wǎng)站頁面及相關(guān)知識點(diǎn)詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
