开发者社区> 问答> 正文

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);  
  
}拜谢各位

展开
收起
kun坤 2020-06-04 13:16:42 748 0
1 条回答
写回答
取消 提交回答
  • 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
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载