正文
Iframe 高度自适应 example （跨子域实现）
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
跨子域的iframe高度自适应
比如 'https://www.kzwr.com/topics/baidu' 嵌入了 'http://pan.kzwr.com/'，这种跨子域的页面,实现起来也比较简单，看下面的详细代码：
<!doctype html>
<html >
<head>
<title>iframe 自适应高度测试</title>
<style>
iframe{
background-color:aquamarine;
width:100%
}
</style>
</head><body>
<iframe src="./index1.html" frameborder="0" id="ifr"></iframe>
</body>
</html>
<!doctype html>
<html>
<head>
<title>hello</title>
<style>
#one {
width: 100px;
height: 1110px;
background-color: #ff6a00;
}
</style>
</head>
<body>
<div id="one"> </div>
<script>
// 计算页面的实际高度，iframe自适应会用到
//www.kzwr.com 欢迎朋友们前来交流
function calcPageHeight(doc) {
var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
var height = Math.max(cHeight, sHeight)
return height
}
window.onload = function () {
var height = calcPageHeight(document)
parent.document.getElementById('ifr').style.height = height + 'px'
}
</script>
</body>
</html>
