iframe高度自适应的问题

认真做事开心做人 发布于 2016/11/21 09:14
阅读 365
收藏 0
问题: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);  
  
}拜谢各位

加载中
0
桃小小
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
0
用心聆听嵌入灵魂的音符
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);
    }
 }



0
认真做事开心做人

首先,感觉上面两位的回答。我用下面这个方法解决了:

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'));
};

0
开源中国最帅没有之一
开源中国最帅没有之一

http://jsbin.com/qutovo/7/edit?html,css,output . 是这种效果哦吗?不用一句js

返回顶部
顶部