Click here to Skip to main content
15,792,382 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi im trying to calculates the time taken to completely download and render the contents of the IFRAME and display it in a DIV element. And refresh the contents of the IFRAME with a button and recalculate the time and display it in the same DIV element.

I have managed to refresh the contents of the IFRAME and but display the load time of the window not the IFRAME.

code is listed below

XML
<html>
<head>

<script type="text/javascript">

//calculate the time before calling the function in window.onload
beforeload = (new Date()).getTime();
function pageloadingtime()
{

     //calculate the current time in afterload

    afterload = (new Date()).getTime();


     // now use the beforeload and afterload to calculate the seconds
    secondes = (afterload-beforeload)/1000;


    document.getElementById("loadingtime").innerHTML = "<font color='red'>(You Page Load took " + secondes + " seconde(s).)</font>";

}

window.onload = pageloadingtime;



</script>

<script type="text/javascript">

function Reload() {
var f = document.getElementById('iframe1');
f.src = f.src;
}

</script>

<title>load time</title>
</head>


<body>

<div id="loadingtime"></div>

<br>

<iframe id="iframe1" width="800" height="350" src="http://google.com"></iframe>
<br>

<input type="button" value="Reload" onClick="pageloadingtime()" onClick="Reload();">

<br>


</body>
</html>
Posted
Updated 11-May-11 8:08am
v2

Hi thank you so much ... i was just having trouble with how to put link the reload function to the iframe hence the Reload() and pageloadingtime() being triggered by a button click ... but i shall keep the onload command in mind. thanks once again!
 
Share this answer
 
The problem you are having is that you are using window.onload and not the iframe's onload attribute. The input button triggered both Reload() and pageloadingtime() which is also a big no no. I fixed your code by moving the setting of beforeload also into Reload() and attaching the trigger to iframe's onload attribute:

XML
<html>
<head>

<script type="text/javascript">

//calculate the time before calling the function in window.onload
beforeload = (new Date()).getTime();
function pageloadingtime()
{

     //calculate the current time in afterload

    afterload = (new Date()).getTime();


     // now use the beforeload and afterload to calculate the seconds
    secondes = (afterload-beforeload)/1000;


    document.getElementById("loadingtime").innerHTML = "<font color='red'>(You Page Load took " + secondes + " seconde(s).)</font>";

}

//window.onload = pageloadingtime;



</script>

<script type="text/javascript">

function Reload() {
    beforeload = (new Date()).getTime();
    var f = document.getElementById('iframe1');
    f.src = f.src;
}

</script>

<title>load time</title>
</head>


<body>

<div id="loadingtime"></div>

<br>

<iframe id="iframe1" width="800" height="350" src="http://google.com" onload="pageloadingtime();"></iframe>
<br>

<input type="button" value="Reload" onClick="Reload();">

<br>


</body>
</html>


Have fun!

-MRB
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900