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>

Here is a nice script, part of a larger section on getting window size/positions and scroll data out of various browsers.  This page really has a lot of good information.

function alertSize() {
    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;
    }
    window.alert( 'Width = ' + myWidth );
    window.alert( 'Height = ' + myHeight );
}

When you are creating reusable javascript files, there are times when you want to tap into the window.onload event, which is fired when the window has finished loading the content.

The problem here, is that you can’t have multiple event handlers for the same event.

So if you have a page that uses 2 scripts which both use the window.onload event, then which ever is loaded last will win, and the other script will never catch the event.

Well one way you can deal with this problem is to write your window.onload (or other events for that matter) using this type of a pattern:

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

This way, you can have several function that all utilize the onload event, and none of them have to know about each other.