简体   繁体   中英

Dynamically define iframe height based on window size (NOT CONTENT)

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

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/

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM