How do I detect when a web page is loaded?

Question

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?

Margie

Answer 1

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() {
      old();
      fn();
    }
  } else {
    window.onload = fn;
  }
}

Masseter

ditto. It's getting beyond a joke in here. "How do I assign a value to a variable?" "Use jQuery!" – Arella

Why not use the native addEventListeners method? – Catharine

You should definitely use use EventListeners instead of overriding the window.onload function. Overriding this function will disable any other function from attaching to it. I would suggest @Luca Matteis 's answer. – Keri

Answer 2

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.

Catharine

because a lot of extension stores consider that privacy violation.... 🙄 – Fran

Answer 3

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

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.

Acker

According to MDN, there are only three values: loading, interactive and complete. – Handfasting

Answer 4

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
})

Piceous

+1 , this is 10x better than the onload event for the precise reasons you mention. Too many people use onload and it might not fire for seconds after the page is displayed to the user. – Overfly

This also has the advantage of playing nice with existing event handlers. window.onload on the other hand will over-write them. – Inpatient

Not that you actually require a library for this. Dean Edwards has a good discussion on this: dean.edwards.name/weblog/2005/09/busted (and an update) – Cuffs

Not only does it need the library but $ must be loaded first, which if implemented correctly would be at the end of the page. Sometime it may be necessary to detect that the page has loaded so that other jQuery functions can run. – Further

Answer 5

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");
}else{
    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.

Credo

Answer 6

In Javascript, you have the load event.

Edit: an example:

<html>
  <head>...</head>
  <body onload="doSomethingWhenPageIsLoaded();">
    ...
  </body>
</html>

Islaen

-1 for adding JavaScript to HTML. Better to externalize it completely. – Overfly

Answer 7

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

<body onload="somefunc();">

Ligetti

simple and easiest way from JS. +1 for that I have added more details in below answer. – Acker

Answer 8

Javascript using the load 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
});

Many

Good response. However, if the poster doesn't know basic Javascript, I doubt he knows jQuery. – Iver

Please don't reference W3Schools, use MDN instead. – Laryngoscope

Answer 9

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.

Inclining