Setting height and width of iframe at page load

Question

I have three iframes in my HTML page. One covering the upper half portion of the window. The other two are below it covering equal width in rest of the screen.

-----------------------------
|                           |
|                           |
-----------------------------
|             |             |  
|             |             |
-----------------------------

I am changing the height and width of the iframes at onreadystatechange event. As a result, on first load these iframes look as three dots on screen and won't resize. On refreshing, they display perfectly.

Code:

function resize_iframes()
{
    var upper_td = document.getElementById("upper_td");
    upper_td.style.height = window.innerHeight/2;

    var upper_frame = document.getElementById("upper_frame");
    upper_frame.src = "http://www.google.com";
    upper_frame.style.height = window.innerHeight/2;
    upper_frame.style.width = window.innerWidth;

    var left_td = document.getElementById("left_td");
    left_td.style.width = window.innerWidth/2;
    left_td.style.height = window.innerHeight/2;

    var left_frame = document.getElementById("left_frame");
    left_frame.src = "http://www.google.com";
    left_frame.style.height = window.innerHeight/2;
    left_frame.style.width = window.innerWidth/2;

    var right_td = document.getElementById("right_td");
    right_td.style.width = window.innerWidth/2;
    right_td.style.height = window.innerHeight/2;

    var right_frame = document.getElementById("right_frame");
    right_frame.src = "http://www.google.com";
    right_frame.style.height = window.innerHeight/2;
    right_frame.style.width = window.innerWidth/2;
}

URLS are taken as "http://www.google.com"; for default, original urls are not shown. What could be the possible solution for this to display the iframes correctly on first load?

Answer 1

For that, you need to write a method in javascript and call that function at the time of page loading method. its a onload() method of html body part.

Answer 2

Got the solution .. Just wait the content to load and call these functions in iframe onload

<body onload="resize_iframes();">
<table>
    <tr>
        <td colspan="2">
        <iframe id = "upper_frame" onload="resize_upper();"></iframe>
        </td>
    </tr>
    <tr>
        <td align="left">
            <iframe id = "left_frame" onload="resize_left();" sandbox></iframe>
        </td>
        <td align="right">
            <iframe id = "right_frame" onload="resize_right();" sandbox></iframe>
        </td>
    </tr>
</table>

<script>
function resize_iframes()
{
    var upper_frame = document.getElementById("upper_frame");
    upper_frame.src = "http://www.google.com";

    var left_frame = document.getElementById("left_frame");
    left_frame.src = "http://www.google.com";

    var right_frame = document.getElementById("right_frame");
    right_frame.src = "http://www.google.com";
}

function resize_upper()
{
    var upper_frame = document.getElementById("upper_frame");
    upper_frame.style.height = window.innerHeight/2;
    upper_frame.style.width = window.innerWidth;
}


function resize_left()
{
    var left_frame = document.getElementById("left_frame");
    left_frame.style.height = window.innerHeight/2;
    left_frame.style.width = window.innerWidth/2;
}

function resize_right()
{
        var right_frame = document.getElementById("right_frame");
    right_frame.style.height = window.innerHeight/2;
    right_frame.style.width = window.innerWidth/2;
}
</script>

Setting height and width of iframe at page load

Question

2 answers

solution1
0 2011-11-23 09:26:48

solution2
0 ACCPTED 2011-11-23 10:51:16

Setting height and width of iframe at page load

Question

2 answers

solution1 0 2011-11-23 09:26:48

solution2 0 ACCPTED 2011-11-23 10:51:16

solution1
0 2011-11-23 09:26:48

solution2
0 ACCPTED 2011-11-23 10:51:16