How do I detect when a web page is loaded?

I want to write an application that detects when a page is loaded in the browser, then I should be able to insert content on top of the loaded web page? Anybody with an idea on how to do that?

Please note that I should be able to do this in any browser (Firefox/IE).

What language should I use to help me do this?

How do I detect this from an external application?

How should I integrate this with the browser?

You would use javascript to do this. If you don’t know how to use javascript, I would recommend reading through some tutorials first.

After you have a basic understanding of javascript, you can detect when a page has loaded by using the window.onload event.

window.onload = function() {
  addPageContents();  //example function call.

Edit: If you want to add more than one onload function, and not use a javascript library, you can wrap your own onload hanlder.

window.whenloaded = function(fn) {
  if (window.onload) {
    var old = window.onload;
    window.onload = function() {
  } else {
    window.onload = fn;

Why not use listeners?

// Everything but IE
window.addEventListener("load", function() {
    // loaded
}, false); 

// IE
window.attachEvent("onload", function() {
    // loaded

This way you can add as many Listeners as you want, you can also detach them! removeEventListener and detachEvent.

Better than onload is to use a function of an existing framework, because onload does sometimes respond after all the resources (images and so on) are loaded and not only the page.

For example jQuery:

$(document).ready( function() {
    // do stuff

Your query can be solved easily by this helpful link: OnLoad W3School

Read More:   Pass checkbox value to angular's ng-click

If you want loading status:

You can do that using simple Javascript

if (document.readyState == "complete") {
    alert("Your page is loaded");

Return Value: A String, representing the status of the current document.

One of five values:

  • uninitialized – Has not started loading yet
  • loading – Is loading
  • loaded – Has been loaded
  • interactive – Has loaded enough and the user can interact with it
  • complete – Fully loaded

For more details visit W3Schools – document.readystate.

Hope this clears your thoughts.

I know there are a lot of answers on this topic, but I believe the best solution is a mix of more than one, in case you don’t know when your script is going to run (in my case a client could paste the script before the window load or after that event).

if (document.readyState == "complete") {
    alert("Your page is loaded");
    window.addEventListener("load", function() {
        alert("Your page is loaded");
    }, false);

You could create a function with this behavior and attach a callback function that does whatever you need.

In Javascript, you have the onload event.

Edit: an example:

  <body onload="doSomethingWhenPageIsLoaded();">

Javascript’s OnLoad event for the body does what you want.

<body onload="somefunc();">

Javascript using the onLoad() event, will wait for the page to be loaded before executing.

<body onload="somecode();" >

If you’re using the jQuery framework’s document ready function the code will load as soon as the DOM is loaded and before the page contents are loaded:

$(document).ready(function() {
    // jQuery code goes here

I prefer this solution:

  * The addEventListener() method attaches an event handler to the specified element.
  * @param {*} event Type of the event (like 'load', 'click' or 'onchange' ...)
  * @param {*} obj When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event
  * @param {*} fn Specifies the function to run when the event occurs. 
 function addListener(event, obj, fn) {
    if (obj.addEventListener) {
       obj.addEventListener(event, fn, false);   // modern browsers
    } else {
       obj.attachEvent("on"+event, fn);          // older versions of IE

// Thge event emitter will be emitted when page is loaded
addListener('load', window, function(event) {
    alert("Your page is loaded");

Of course, you can add more different addEventListener, for example click, onChange etc.

Read More:   How can I scrape sites that require authentication using node.js?

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts