一、記錄說明
- 事先說一點(diǎn)，iframe不常用，是個(gè)快被淘汰的東西還是已經(jīng)淘汰了，我也說不清楚。至少17年底看html5的書的時(shí)候，書上就說這個(gè)不怎么用了，理解一下就行。
- 但是那時(shí)候進(jìn)公司后，發(fā)現(xiàn)公司用的bootstrap框架，然后多tab頁那種全部寫在同一個(gè)jsp中，測試的人說頁面太大剛開始加載很慢。后面項(xiàng)目經(jīng)理就說把子tab那些頁面需要時(shí)再用iframe加載進(jìn)來吧，后面就改成這種開發(fā)多tab頁的模式了。雖然知道可以這樣做，但是還是怪怪的。
- 反正已經(jīng)用了，就順便記下來用法吧。
二、iframe說明
<iframe></iframe>標(biāo)簽用于定義一個(gè)頁面的內(nèi)聯(lián)框架。就是在一個(gè)html頁面中分出小塊，然后用iframe把其他網(wǎng)頁嵌入進(jìn)來，這小塊就會(huì)顯示其他html頁面的內(nèi)容了。
- 缺點(diǎn)很明顯。耗能高，相當(dāng)于重新打開了一個(gè)瀏覽器頁面；會(huì)產(chǎn)生很多子頁面不好管理；還有一個(gè)坑，就是不適用響應(yīng)式布局（需要自己判斷修改），iframe必須指定高度寬度，這相當(dāng)于在主頁面開了一個(gè)固定大小的小窗口，然后會(huì)通過這個(gè)窗口顯示其他頁面的信息，這時(shí)候老是會(huì)出現(xiàn)其他頁面比iframe高度大而顯示不全；還有其他缺點(diǎn)等等。。。
- 有點(diǎn)也有。嵌入頁面簡單，用于多個(gè)網(wǎng)頁的共有部分復(fù)用代碼，如導(dǎo)航欄、廣告欄等；重載頁面不需要重載整個(gè)頁面只需要框架頁。
三、iframe標(biāo)簽常用屬性
- name，名稱。
- width，寬度。
- height，高度。
- src，嵌入頁面的url。
- frameborder，是否顯示邊框，0無邊框，1有邊框。
- align，如何根據(jù)周圍元素來對(duì)其iframe（left、rigth、top、middle、bottom）。
- scrolling，是否顯示滾動(dòng)條（yes、no、auto）。
四、父、子頁面常用方法
1、父頁面
var iframe = document.getElementById("id"); //獲取iframe標(biāo)簽
var iwindow = iframe.contentWindow; //獲取iframe的window對(duì)象
var idoc = iwindow.document; //獲取iframe的document對(duì)象
//注意：如果是jquery抓取的iframe，$('#id')是一個(gè)對(duì)象組，不能直接像原生一樣獲取window對(duì)像。
//需要加上"[0]"或".eq(0)"來取得對(duì)象。
//即
var iwindow = $('#iframeId')[0].contentWindow；
iwindow.func(); //執(zhí)行子頁面的方法，常用
iwindow.attr; //獲取子頁面全局window變量
注意：iframe加載也需要時(shí)間（相當(dāng)于重新打開一個(gè)頁面），需要在父頁面操作子頁面，要等子頁面加載完成，iframe常加上onload事件，jq常加上$('#iframeId').load(function(){});再開始操作子頁面。
2、子頁面
//parent即父頁面window對(duì)象
(window.)parent.Func(); //執(zhí)行父頁面方法，常用
(window.)parent.Attr; //獲取父頁面全局window變量
//我常用來取父頁面操作后改變的狀態(tài)，判斷進(jìn)入的這個(gè)子頁面是新增、修改還是詳細(xì)頁面
五、實(shí)例
這里也包含了項(xiàng)目中寫的常用的公共函數(shù)。為了方便js直接嵌入html中。因?yàn)閖query很方便，也引入了。
-
工程
- 父頁面parentPage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主頁面</title>
</head>
<body>
<div style="height: 100%;width: 1200px;border: 2px solid blue;margin: 0 auto;padding: 20px;box-sizing: border-box;">
<h1>我是父頁面</h1>
<input type="button" value="加載子頁面" id="addBtn"/>
<div id="iframeDiv" style="margin-top:10px ;"></div>
</div>
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var STAT = 'add';
$('#addBtn').click(function(){
ifr('iframeDiv','http://127.0.0.1:8848/iframeTest/childPage.html');
$('#iframeDiv').find('iframe').load(function(){
$(this)[0].contentWindow.setHText('我是子頁面'); //父頁面調(diào)用子頁面方法
});
});
// 父頁面中增加iframe
function ifrPoint(Id, Src) {
$("#" + Id).find('iframe').remove();
var tag = "<iframe style='width: 100%;height:100%;' frameborder='0' scrolling='auto'></iframe>";
$("#" + Id).append(tag).find('iframe').attr('src', Src);
}
// 給增加的iframe根據(jù)內(nèi)容設(shè)置多余高度
function setIfrHeight(Id, num) {
$("#" + Id).find('iframe').on('load', function() {
var Num = 0;
if (num != undefined) {
Num = num;
}
$(this).height($(this).contents().find('body').height() + Num); //contents,jq方法,返回所有子節(jié)點(diǎn),也能訪問iframe中的html
});
}
// 父頁面增加iframe節(jié)點(diǎn)并自適應(yīng)
function ifr(Id, Src, num) {
ifrPoint(Id, Src);
setIfrHeight(Id, num);
}
</script>
</body>
</html>
- 子頁面childPage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="height: 200px;width: 1000px;border: 2px solid red;margin: 0 auto;padding: 20px;box-sizing: border-box;">
<h2></h2>
<input type="button" value="我要變大"/>
</div>
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
console.log(parent.STAT); //可以根據(jù)父頁面來判斷當(dāng)前頁面的操作
$('input').click(function(){
$('div').height(500); //單獨(dú)用,頁面會(huì)超過iframe的高度,顯示不全或者出現(xiàn)滾動(dòng)條
//自適應(yīng)
ifrChildAut('iframeDiv',0);
});
//設(shè)置子頁面h2標(biāo)簽內(nèi)容的方法,讓父頁面調(diào)用
function setHText(Text) {
console.log("父頁面調(diào)用設(shè)置標(biāo)簽內(nèi)容");
$('h2').text(Text);
}
// ifr子頁面自適應(yīng)高度
function ifrChildAut(Id, Num) {
var num = 200;
if (undefined != Num) {
num = Num;
}
var Height = $(document.body).height();
$(window.parent.document).find("#" + Id).find('iframe').height(
Height + num);
$(window.parent.document).scrollTop(0);
}
//也可以自適應(yīng)的方法寫在父頁面，然后子頁面 parent.方法 調(diào)用
</script>
</body>
</html>
-
實(shí)際效果
六、替換方法
1、ajax獲取頁面操作DOM加載。jquery也有提供$('divId').load('.html')直接加載的方法。
2、vue等框架，組件。
