iframe高度自适应的问题 ： 配置报错
问题：iframe如何自适应高度？
问题描述：iframe随加载页面的高度变化，加载的页面高度不是固定的，页面也不是固定的。如何实现，百度了很多方法都不行，被逼无奈求助各位了。
代码：
function createiframe(divobj,index,s_url){
var iframe = document.createElement("iframe");
iframe.setAttribute("id","frame"+index);
iframe.setAttribute("src",s_url);
iframe.setAttribute("width","100%");
iframe.setAttribute("height",300);
iframe.setAttribute("nscrolling","no");
iframe.setAttribute("frameborder",0);
iframe.setAttribute("marginwidth",0);
}
尝试的代码（翻页或加载其他页面无效）： function reinitIframe(){
var iframe = document.getElementById("frame0");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height+120;
}catch (ex){}
}
var timer1 = window.setInterval(reinitIframe(), 500); //定时开始
function reinitIframeEND(){
var iframe = document.getElementById("iframe0");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
// 停止定时
window.clearInterval(timer1);
}拜谢各位
写回答
-
function iFrameHeight() {
var ifm= document.getElementById("framedetail");
var subWeb = document.frames ? document.frames["framedetail"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
希望能帮到你。 ######ifm.contentDocument 报null######
function reSizeParentIframe() { var realHeight = 0; if(navigator.userAgent.search(/Trident/i)>0){ realHeight = window.document.documentElement.offsetHeight+35; }else if (navigator.userAgent.indexOf("Firefox") > 0 || navigator.userAgent.indexOf("Mozilla") > 0 || navigator.userAgent.indexOf("Safari") > 0 || navigator.userAgent.indexOf("Chrome") > 0) { // Mozilla, Safari,Chrome, ...
realHeight = window.document.documentElement.offsetHeight-7; } else if (navigator.userAgent.indexOf("MSIE") > 0) { // IE
var bodyScrollHeight = window.document.body.scrollHeight + 21; //取得body的scrollHeight
var elementScrollHeight = window.document.documentElement.scrollHeight + 1; //取得documentElement的scrollHeight
realHeight = Math.max(bodyScrollHeight, elementScrollHeight); //取当中比较大的一个
} else {//其他浏览器
realHeight = window.document.body.scrollHeight + window.document.body.clientHeight + 1; } var uheight = $("#uapmhead", window.parent.document).height(); var cheight = window.parent.document.documentElement.clientHeight-uheight-5; if (realHeight < cheight) { realHeight = cheight; } if ($("iframe[src='views/businessview/bizAnalyview/businessCount.jsp']", window.parent.document).is("iframe")) { $("iframe[src='views/businessview/bizAnalyview/businessCount.jsp']", window.parent.document).height(realHeight); } }###### 首先，感觉上面两位的回答。我用下面这个方法解决了：
function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; } } };window.onload = function () { setIframeHeight(document.getElementById('frame0')); }; ###### http://jsbin.com/qutovo/7/edit?html,css,output . 是这种效果哦吗？不用一句js
2020-06-05 13:18:28赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
