2

我找到了诸如如何在 Firefox 中动态调整 iFrame 大小的线程？其中讨论了基于远程内容调整 iframe 的大小；但是，我还没有找到一种方法（在 Firefox 中）根据窗口大小设置 iframe 的高度。

其他浏览器可以使用.body.scrollHeight，但 Firefox 似乎无法使用。见... http://jsfiddle.net/gjrowe/X63KR/

要查看具有自动调整大小的 iframe，请查看此页面... http://jsfiddle.net/gjrowe/y2WCP/

它适用于 Chrome 等浏览器，但不适用于 Firefox

4

2 回答 2

3

这是我为跨浏览器修复所做的...

我添加了这个javascript函数......

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

然后我换了...

var content_height=document.body.scrollHeight-100;

至...

var content_height=getDocHeight()-100;

您可以在http://jsfiddle.net/y2WCP/9/看到它的实际效果

于 2013-04-10T20:02:07.860 回答
2

我不知道你是否想使用 jQuery，但使用 jQuery 我想我解决了你的问题..

// Header is 50px and footer is 50px; therefore, 100px is of screen height is used
// Define content_height and consider the 100px which has already been used
var content_height=document.body.scrollHeight-100;
//alert(content_height);
content_height = $(window).height() -110;
//alert(content_height);
// Set iframe height
document.getElementById('pdf_frame').style.height=content_height+"px";

// Reset iframe height after window resize
$(function(){
    $(window).resize(function(){
        content_height = $(window).height()-110;
        //var content_height=document.body.scrollHeight-100;

        document.getElementById('pdf_frame').style.height=content_height+"px";
    });
});

jsFiddle 链接

于 2013-04-10T19:15:42.137 回答