How to find when HTML content is loaded - without using onload in Javascript

When you use onload event, your script will be executed when the whole page is completely loaded. If your page has iframes, then onload will be executed after even iframe content also loaded.

In some cases you may need to do something when the page html is loaded. Following sample demonstrate how to achieve this.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>
</head>
<body onload="alert('this is page load event')">
    <div>
        <!-- Your page content here -->
        <iframe id="frm" src="http://thilankapriyankara.blogspot.com/" width="400px" height="400px"></iframe>
        <span id="lastCtrl">this is last text</span>
    </div>
    <script type="text/javascript">
        //write your script here
        //script white here will be called just after the page html is loaded
        alert('html loaded');
        alert(document.getElementById('lastCtrl').innerHTML);
    </script>
</body>
</html>



1) Once you run above sample, first you will see "html loaded" message.
2) Then you will see "this is last text" message. That means page html is loaded into browser.
3) Then you will see "http://thilankapriyankara.blogspot.com/" page loading into iframe.
4) When above page is loaded into iframe, you will see "this is page load event" message. That means onload event is fired at the end of the page load.

Now you know where to call your method...........!

Comments

Popular posts from this blog

Embedding PowerBI with ASP.NET Core 2 and Angular(2,4,5)

Handling Exit Event of Console Application in C#

Taxi - Cab services in Colombo - Sri Lanka