CODEWITHSUNDEEP
javascriptgoogle-chromeiframeresize
Mats Raemen
Mats Raemen

Reputation: 1812

Javascript resize function for iframes does not work in google chrome

I used a javascript resize function i found on stackoverflow and it works great with IE and FF. However in Google Chrome it can only resize iframes that are bigger than the previous one. If it has to resize smaller iframes, it takes the same height and adds 30px.

I assume it has got something to do with retrieving the scrollHeight, but i don't know how to fix it.

I already tried to use a timeout because I read somewhere that might help, but it doesn't.

Here's the relevant code:

    function autoResize(id){
        var newheight;
        if(document.getElementById)
        {
            newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
            newheight=newheight+30;
        }
        document.getElementById(id).height = (newheight) + "px";
    }

    <iframe src="<?php echo "$LC"; ?>/home.html" name="iframe" id="iframe" width="435px" height="10px" scrolling="no" frameborder="0" style="margin-left:-10px;padding-bottom:20px;" onLoad="setTimeout(autoResize('iframe'),250);";">

Edit: solved it by changing the function to

    function autoResize(id) {
        document.getElementById(id).height = document.getElementById(id).contentDocument.documentElement.scrollHeight+15; //Chrome

        document.getElementById(id).height = document.getElementById(id).contentWindow.document.body.scrollHeight+15; //FF, IE
    }

Upvotes: 3

Views: 10043

Answers (1)

Mats Raemen
Mats Raemen

Reputation: 1812

function autoResize(id) {
    document.getElementById(id).height = document.getElementById(id).contentDocument.documentElement.scrollHeight+15; //Chrome

    document.getElementById(id).height = document.getElementById(id).contentWindow.document.body.scrollHeight+15; //FF, IE
}

Upvotes: 8

Related Questions