iframe嵌入页面自适应目标页面的高度教程详解

日期: 1月前

1、方法一:无需加载jQuery库简单易操作,用的JavaScript来获取源页面的高度然后赋值给iframe标签中的heaght元素实现自使用高度。
<!--html代码 在代码中需要添加一个 onload="iFrameHeight();" 参数用来获取高度值 还有一个 id="iframe" 让js识别-->
<iframe src="../chenxing.html" id="iframe" frameborder="0" scrolling="no" onload="iFrameHeight();" width="100%"></iframe>
<!--js代码 放置到页面body标签中即可-->
function iFrameHeight() {
var ifm = document.getElementById("iframe");
var subWeb = document.frames ? document.frames["iframe"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}

2、使用jQuery的方式实现

//注意:下面的代码是放在iframe引用的子页面中调用
$(window.parent.document).find("#iframe").load(function(){
var main = $(window.parent.document).find("#iframe");
var thisheight = $(document).height()+30;
main.height(thisheight);
});

//注意:下面的代码是放在和iframe同一个页面调用
$("#iframe").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});