一、记录说明
- 事先说一点，iframe不常用，是个快被淘汰的东西还是已经淘汰了，我也说不清楚。至少17年底看html5的书的时候，书上就说这个不怎么用了，理解一下就行。
- 但是那时候进公司后，发现公司用的bootstrap框架，然后多tab页那种全部写在同一个jsp中，测试的人说页面太大刚开始加载很慢。后面项目经理就说把子tab那些页面需要时再用iframe加载进来吧，后面就改成这种开发多tab页的模式了。虽然知道可以这样做，但是还是怪怪的。
- 反正已经用了，就顺便记下来用法吧。
二、iframe说明
<iframe></iframe>标签用于定义一个页面的内联框架。就是在一个html页面中分出小块，然后用iframe把其他网页嵌入进来，这小块就会显示其他html页面的内容了。
- 缺点很明显。耗能高，相当于重新打开了一个浏览器页面；会产生很多子页面不好管理；还有一个坑，就是不适用响应式布局（需要自己判断修改），iframe必须指定高度宽度，这相当于在主页面开了一个固定大小的小窗口，然后会通过这个窗口显示其他页面的信息，这时候老是会出现其他页面比iframe高度大而显示不全；还有其他缺点等等。。。
- 有点也有。嵌入页面简单，用于多个网页的共有部分复用代码，如导航栏、广告栏等；重载页面不需要重载整个页面只需要框架页。
三、iframe标签常用属性
- name，名称。
- width，宽度。
- height，高度。
- src，嵌入页面的url。
- frameborder，是否显示边框，0无边框，1有边框。
- align，如何根据周围元素来对其iframe（left、rigth、top、middle、bottom）。
- scrolling，是否显示滚动条（yes、no、auto）。
四、父、子页面常用方法
1、父页面
var iframe = document.getElementById("id"); //获取iframe标签
var iwindow = iframe.contentWindow; //获取iframe的window对象
var idoc = iwindow.document; //获取iframe的document对象
//注意：如果是jquery抓取的iframe，$('#id')是一个对象组，不能直接像原生一样获取window对像。
//需要加上"[0]"或".eq(0)"来取得对象。
//即
var iwindow = $('#iframeId')[0].contentWindow；
iwindow.func(); //执行子页面的方法，常用
iwindow.attr; //获取子页面全局window变量
注意：iframe加载也需要时间（相当于重新打开一个页面），需要在父页面操作子页面，要等子页面加载完成，iframe常加上onload事件，jq常加上$('#iframeId').load(function(){});再开始操作子页面。
2、子页面
//parent即父页面window对象
(window.)parent.Func(); //执行父页面方法，常用
(window.)parent.Attr; //获取父页面全局window变量
//我常用来取父页面操作后改变的状态，判断进入的这个子页面是新增、修改还是详细页面
五、实例
这里也包含了项目中写的常用的公共函数。为了方便js直接嵌入html中。因为jquery很方便，也引入了。
-
工程
- 父页面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('我是子页面'); //父页面调用子页面方法
});
});
// 父页面中增加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根据内容设置多余高度
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方法,返回所有子节点,也能访问iframe中的html
});
}
// 父页面增加iframe节点并自适应
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); //可以根据父页面来判断当前页面的操作
$('input').click(function(){
$('div').height(500); //单独用,页面会超过iframe的高度,显示不全或者出现滚动条
//自适应
ifrChildAut('iframeDiv',0);
});
//设置子页面h2标签内容的方法,让父页面调用
function setHText(Text) {
console.log("父页面调用设置标签内容");
$('h2').text(Text);
}
// ifr子页面自适应高度
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);
}
//也可以自适应的方法写在父页面，然后子页面 parent.方法 调用
</script>
</body>
</html>
-
实际效果
六、替换方法
1、ajax获取页面操作DOM加载。jquery也有提供$('divId').load('.html')直接加载的方法。
2、vue等框架，组件。
