问题: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
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。