Dynamically define iframe height based on window s

2019-05-18 14:39发布

问题:

I have found threads such as How to dynamically resize iFrame in Firefox? which talk about sizing an iframe based on the remote content; however, I have not found a way (in Firefox) to set the height of the iframe based on the window size.

Other browsers are able to use .body.scrollHeight but it appears that Firefox can't use that. See... http://jsfiddle.net/gjrowe/X63KR/

To see the iframe in action with the auto-sizing, view this page... http://jsfiddle.net/gjrowe/y2WCP/

It works in browsers such as Chrome but not Firefox

回答1:

Here is what I did to have a cross-browser fix...

I added this javascript function...

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

I then changed...

var content_height=document.body.scrollHeight-100;

to...

var content_height=getDocHeight()-100;

You can see it in action at http://jsfiddle.net/y2WCP/9/



回答2:

i don't know if you want to use jQuery, but with jQuery i think i fixed your problem..

// 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 link