**
注意: 以下测试代码, 编辑好后, 可以用http-server打开查看效果,如果直接双击打开页面会报“Uncaught
DOMException: Blocked a frame with origin “null” from accessing a
cross-origin frame”错误。
**
这里介绍的是将纯粹的一个页面嵌套在iframe中, 而iframe的高度也是由内容高度决定的。
首先是父页面(设置一个id主要是要在子页面中获取)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe frameborder="0" height="30px" src="./linshi1.html" width="" height="" scrolling="no" id="linshiIframe"></iframe>
<h1>我是父页面的内容~</h1>
</body>
</html>
子页面linshi1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body "iframeHeight()">
<div class='beIframe'>
<div>
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
我是被嵌套的页面的内容~<br />
</div>
</div>
<script type="text/javascript">
function iframeHeight(){
// obj 这里是要获取父页面的iframe对象
var obj = parent.document.getElementById('linshiIframe');
// 调整父页面的高度为此页面的高度
obj.height = this.document.body.scrollHeight;
}
</script>
</body>
</html>
好了, 如上, 不管子页面中内容有多少, 父页面都能够将iframe的高度撑开, 从而不显示滚动条。
/…/
有的时候内嵌的页面是一个tab切换的页面, 不过实现起来原理还是一样的,只不过在获取高度上, 我们稍微改变一下,下面我来展示一个内嵌tab页面的js代码:
var obj = parent.document.getElementById('imParent');
var box = document.getElementById('box');
var btn = document.getElementById('btn');
var buttons = btn.getElementsByTagName('button');
var boxes = box.children;
for(var i = 0; i < buttons.length; i++){
buttons[i].idx = i;
buttons[i].onclick = function(){
for(var i = 0; i< boxes.length; i++){
boxes[i].classList.remove('active');
}
boxes[this.idx].classList.add('active');
//重点是在这儿,获取高度不再是获取body的高度;
obj.height = (boxes[this.idx].offsetHeight + 50) + 'px';
console.log('height:',boxes[this.idx].offsetHeight);
}
}