Dynamically Resizing an IFrame to Fill The Browser

If you ever work with an IFrame, you will notice that you can’t set height=100%.

But, many times you might want to have an IFrame act as if that property had the desired effect.  i.e. If you make your browser window taller, you want the heigh of your IFrame to grow as well.

You can acheive this using the following script:

       function resize_iframe() {
            var myWidth = 0, myHeight = 0;
            if( typeof( window.innerWidth ) == 'number' ) {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }

            var iNewHeight;
            iNewHeight = parseInt(myHeight)-40;
            document.getElementById("WgipIFrame").style.height = iNewHeight;
        }

        //-- see if there is already something on the onresize
        var tempOnresize = window.onresize;
        //-- create our event handler
        window.onresize = function(){
            //-- if tempFunc is a function, try to call it
            if (typeof (tempOnresize) == "function"){
                try{
                    tempOnresize();
                } catch(e){} //--- if it errors, don't let it crash our script
            }
            resize_iframe();
        }

Then you can set the IFrame’s onload=”resize_iframe();” like this:

<iframe src="x.htm" style="width:100%;"
  id="WgipIFrame" name="WgipIFrame"
  onload="resize_iframe();"></iframe>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s