Javascript function on page load



Keywords: javascript function on page load
Description: When scripts are written they're used to accomplish a given task, such as creating a rotating picture gallery, or to validate a form. For each task, a separate script is necessary. Often, a script is called using an onload function.

When scripts are written they're used to accomplish a given task, such as creating a rotating picture gallery, or to validate a form. For each task, a separate script is necessary. Often, a script is called using an onload function.

JavaScript is one of the most popular programming languages in use on the World Wide Web. It can create interactive pages through the use of menus, forms and calendars. It can also be used to track a visitor's history on your site, play games and many other things.

When scripts are written they're used to accomplish a given task, e.g. create a rotating picture gallery, or to validate a form. This means that for each different type of usage, a separate script is necessary. Often, a script is called using an onload function.

When a Web page is loaded, the code on the page — whether HTML, CSS, PHP, or some other type — is generally processed from the top down. As the browser comes upon a section of code, it's executed and the intended action is (hopefully) performed. Let's say you have the following script in the head section of a Web page:

When the page is loaded, the browser will stop at the script above and execute it. An alert window will pop up and the page will stop loading until the alert window is closed. Often, this isn't an issue, but if the script needs to access elements on the page that aren't yet loaded (i.e. below the current code), you will encounter problems. To resolve these, here are a few solutions.

One method is to place the script at the bottom of the Web page, just above the closing </body> tag. This does, however, present a few problems. First, there is a period of time that those elements which are you seeking to change with the script will be clearly seen by the visitor. Then, once the script is executed, they will "magically" change. With a fast loading page and a script that executes quickly, this might not be a problem, but if the original elements can be seen by the visitor, and are then changes, the visitor may perceive it to be some type of a hack or bug on the page, and leave the site immediately. Obviously, that's not good.

Secondly, either the script, or a link to it, will need to be included in the actual HTML body code. That's not unobtrusive JavaScript. It's best if you can keep everything separate. You'll find it's easier to work on any aspect of the page, and the page itself will load faster.

The window object in JavaScript has an event handler called onload. When this event handler is used, the entire page and all of its related files and components are loaded before the function listed in the onload event handler is executed, hence the term "on load ."

As shown in the script above, it's easy to use, but what if you have more than one function you want to call using an onload event handler?

Unfortunately, it's not that simple. After the first onload event handler is executed, it will be replaced when the second onload event handler is executed. That, in turn, will be replaced immediately just as soon as the third onload event handler is executed. There are workarounds for this, though.

One method that has been used quite a bit is the linking of multiple events. It places several function calls in a chain, using one onload event handler. The method would look like this:

Still, once again we run into the unobtrusive problem. In addition, you will need to add this to the <body> tag of every page that needs to use the called functions. That could be quite tedious for a large Web site, especially when changes or additions are needed.






Photogallery Javascript function on page load:


console-assert.jpg


Call javascript on page load from code behind


02.png


Comparing DOM XSS Tools On Real World Bug


Vincent Deelen: July 2013


Having problems getting this working with twitter  Issue #19 ...


Onload Javascript W3schools


Onload Javascript W3schools


Java script by Act Academy


What's the Purpose for Javascript Closures? - chris beaver consulting


Complete Idiots Guide To Java Script


How to really defer loading javascript


Analytics.js - Segment


In an asp:UpdatePanel Sys.Application.add_load() = $(document ...


javascript - Can't find element in DOM after loading it with ajax ...


Custom JavaScript function loaded after the UI has been loaded ...


1. Using Ajax: Web Apps for a New Generation - Head First Ajax


java - JavaScript only loads once per tab? (Multiple "pages" with ...


Loading JavaScript via CustomAction and Initializing Functions ...


Ajax and .Net