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() {
old();
fn();
}
} 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
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:
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");
}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.
In Javascript, you have the load event.
Edit: an example:
<html>
<head>...</head>
<body onload="doSomethingWhenPageIsLoaded();">
...
</body>
</html>
Javascript's OnLoad event for the body does what you want.
<body onload="somefunc();">
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
});
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.
