要解决的问题:iframe初始高度太小。想根据页面内容,自动撑开
HTML代码:
<iframe id="frame-content" scrolling="auto" src="你的网页地址" frameborder="0"></iframe>
在iframe同页面 => JS代码:
// iframe自适应会用到
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
}
var ifr = document.getElementById('frame-content')
ifr.onload = function () {
var iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow
var height = calcPageHeight(iDoc);
ifr.style.height = height + 'px'
}
注:
1、在使用这种方法之前,需要注意一个跨域的问题
,被iframe引入的页面必须为同域页面
。不然会报错
2、有时候本地调试的时候,比如打开的文件在浏览器开头为 file://
浏览器也会默认为跨域页面,这时候只需要自己搭建一个服务器环境(phpstudy之类的都可以)。就可以了
3、有时候可能需要改变iframe的内容,比如iframe中引入的A页面,高度为1000px
、而B页面高度只有500px
、这时候切换的时候,B页面即使重新计算了高度,也不会生效,默认继承了A页面的1000px、所以在切换页面的时候,最好就是手动设置一下iframe的高度,在进行计算。
**THE END**