How to get the time to load the iframe using onload

Question

I have a lisst of urls that I have to use as a source for the iframe. So after creating child and appending to the DOM, I run the onload function to do further processing but the time that I get for each iframe is not correct. The code is as follows -

`var s = document.createElement('iframe');
document.body.appendChild(s);
s.onload = function() {
var totalTime = performance.now() - startTime;
console.log(document.body);
console.log(totalTime, element);
timestamps.push(totalTime);
}
s.src=url;
var startTime = performance.now();
}`

So here URL is one of the urls from that array and I have to get the time to check how much time a iframe (url) takes to load.

To test the time, in of the url endpoint I put a sleep function so that I can validate that the time to load that is more than any other case. But it never happens that I get the max time on that endpoint.

Answer 1

This was the standard javascript way for Performance Timing in the not too distant past :

NB: Given "W" is your iframe ID, then...

var PT=W.contentWindow.performance.timing;


var Timing=((PT.loadEventEnd-PT.navigationStart)/1000).toFixed(2);

Which returned the number of seconds taken for an iframe to load in 2 decimal places.

However, it has since changed to "PerformanceNavigationTiming" in accordance with...

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming

But I wanted you to see the calculation part above which can't be too different now.

You can use the link above to modify any name changes where required.