Call JavaScript function on page load.

How do I call a JavaScript function on page load?

This tutorial will teach us to call a JavaScript function on page load. In many cases, while programming with HTML and JavaScript, programmers need to call a function, while loading the web page or after the web page load finishes. For example, programmers need to show the welcome message to the user on page load, and the programmer needs to call a JavaScript function after the page load event.

There are various ways to call a function on page load or after page load in JavaScript, and we will look at them one by one in this tutorial.

• Using the onload event in the tag
• Using the window.onload Event
• Using the DOMContentloaded Event

Using the onload event in the tag

The first approach for calling a function on the page load is the use an onload event inside the HTML tag. As you know, the HTML body contains the entire content of the web page, and when all HTML body loads on the web browser, it will call the function from the JavaScript.

Syntax

Follow the below syntax to use onload event in the tag.

Example

In the below example, we have created the JavaScript function named welcomeFunction(). We are calling that function from the tag using the onload event, and it shows the welcome message in the alert box to the users.

      
Methods to call a JavaScript function on page load.
 
Call the JavaScript function on page load by using onload event in the HTML body tag.
 let message = document.getElementById("message"); function welcomeFunction() 

When users run the example code, they will give the welcome message in the alert box. When function execution completes, users will get the above output message.

Using the window.onload Event in JavaScript

Here, we have a second approach for calling the function on page load in JavaScript. Every web page contains the window object by default, and the window object represents the global variables. We can access any global variable or function in JavaScript using the window object. In this approach, we will use the onload property of the window object.

By using the window.onload property, users can either call a named function or bind an anonymous function to the window.onload and all code inside the anonymous function will be executed after the page load.

Syntax

Users can follow the below syntax to use the window.onload to call a function on page load.

Function simpleFunction ( ) < // function body >Window.onload = simpleFunction( );

Example

In the below example, we are calling the named function on the page load using the window.onload property.

      
Methods to call a JavaScript function on page load.
 
Call the JavaScript function on page load by using window.onload event in the JavaScript.
  window.onload = simpleFunction( 10, 20 ); // call function with parameters on page load function simpleFunction( num1, num2 ) 

Using the DOMContentLoaded Event

JavaScript has a cool feature of the event listener, and users can call a function or perform some operation when any event triggers. In this approach, we will use the “DOMContentloaded” event. We will call the desired function using the addEventListener() method in JavaScript. Also, we will apply the event listener to the whole document such that we can call a function on the page load.

Syntax

To call the DOMContentLoaded event, users can follow the below syntax.

document.addEventListener("DOMContentLoaded", function() < // function body >);

Example

The below example demonstrates the use of the DOMContentLoded event to trigger a function call on the page load.

      
Methods to call a JavaScript function on page load.
 
Call the JavaScript function on page load by using document.addEventListener( ) method.
 let message = document.getElementById("message"); document.addEventListener( "DOMContentLoaded", functionCall()); function functionCall() 

Users will also see the alert box with the message when the function will be executed.

Conclusion

Here, we have defined three approaches to trigger a function call on the page load. The first approach we can use inside the HTML code, the second one in the JavaScript code, and the third approach is the best approach to achieve our goal.

Furthermore, users can change the event in the third approach to trigger a function on a particular event. One more thing in the last approach is rather than triggering the event listener to the whole document, users can apply it to a specific HTML element also.

Источник

Call javascript content page

User71929859 posted
Hello, The way you are calling the function is correct. Since the master page and content page both render as a one page at the client side, it really doen’t matter whether you’ve included the function in master page or content page, when you are calling a client side event. Put an alert in your function and verify that it’s getting called. If it’s getting called, then your problem is with the javascript function itself, not how you call it. Check your browser console for any errors.

All replies

Page.ClientScript.RegisterStartupScript(this.GetType(), "Script", "YourFunctionHere()", true);

User-996336415 posted
You can put this script block just before tag of your .aspx page

User-996336415 posted
Down is full code of Default.aspx page of ASP.NET application. When it is requested, it shows alert box with text Call of my function» — this is instruction in JavaScript function , which is called after loading of Default.aspx in Web browser. CodeFile=»Default.aspx.cs» Inherits=»_Default» %>

Welcome to ASP.NET!

To learn more about ASP.NET visit www.asp.net.

You can also find title=»MSDN ASP.NET Docs»>documentation on ASP.NET at MSDN.

O. Zhelezov

User-996336415 posted
I have just published full code of ASP.NET Web site application, that I use to test this code. You can download it from address http://rusalka-bg.com/dt/CallJS.zip If you load in VS 2010 and start this site, you will see, that only when Home page is opened (or refreshed) alert box appears, but if you open About page — it will not. So JavaScript function MyFunction is in the Default.aspx, not in Site.Master. If this is not satisfied for you, I really can’t help you. O. Zhelezov

User-1441883313 posted
this is my javascript function in master page.. function MM_preloadImages() < //v3.0
var d=document; if(d.images) < if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i if (a[i].indexOf(«#»)!=0)< d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];>>
> i want to call this function on load event. i had try still not working pls help

User-996336415 posted
Your code really works, but do not make anithing, because you call function MM_preloadImages without parameters. Functions: MM_swapImgRestore()
MM_preloadImages()
MM_findObj
MM_swapImage() are automatically generated by Dreamweaver to make rollowed images. Down you can see code of .aspx page
with rollowed image in it , which works. I have copied needed code from DreamWeaver CodeFile=»Default.aspx.cs» Inherits=»_Default» %>

Welcome to ASP.NET!

window.onload = function () MM_preloadImages(‘images/clock3.gif’);
>
//
function MM_swapImgRestore() < //v3.0
var i, x, a = document.MM_sr; for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
>

function MM_preloadImages() < //v3.0
var d = document; if (d.images) if (!d.MM_p) d.MM_p = new Array();
var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)
if (a[i].indexOf(«#») != 0) < d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; >
>
>

function MM_swapImage() < //v3.0
var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i < (a.length - 2); i += 3)
if ((x = MM_findObj(a[i])) != null) < document.MM_sr[j++] = x; if (!x.oSrc) x.oSrc = x.src; x.src = a[i + 2]; >
>

It’s supposed, that your application have subfolder images with two image files in it: images/clock2.gif and
images/clock3.gif O. Zhelezov

Источник

Call JavaScript function from ASP.NET Content Page

One of the frequently asked questions by developers on the forums is How to call a JavaScript function from an ASP.NET Content Page, especially when the JavaScript is kept in a separate .js file. Let us see one of the ways:

Assuming you have a website with Master-Content page, create a folder called Scripts and place a JavaScript file in it. We will call it Alert.js. Add a function to the file that alerts a message, as shown below:

function callAlert() alert('Calling .js from Content Page');
>

The folder structure is as shown below:

Now let’s reference this file in our application. There are two common ways to do it: One way is to reference the .js file directly in your MasterPage. However the disadvantage is that if we use this approach, we would add a reference to the .js file for every content page in the application that uses the Master Page, even if we intend to use the script only in one Content Page. The second way is to add the .js file directly from the Content Page using the ‘RegisterClientScriptInclude’ as shown below:

protected void Page_Load(object sender, EventArgs e)
 Page.ClientScript.RegisterClientScriptInclude("contentpg", 
ResolveUrl(@"Scripts\Alert.js")); 
// check if the start up script is already registered with a key 
if (!Master.Page.ClientScript.IsStartupScriptRegistered("alert")) 
 // since it is not registered, register the script 
Master.Page.ClientScript.RegisterStartupScript 
(this.GetType(), "alert", "callAlert();", true); 
>
>

That’s it. Run the page and the alert will popup. Now right click the page and view the source and you should see the script reference added to the page.

Note: As you can see, this approach adds the JavaScript reference inside the tag of the page and not the .

If you liked this tip, make sure you read my articles

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books — 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Источник

Call javaScript Function After Whole Page Load Complete

Call/Execute javascript function after the whole web page is loaded. Here you will learn two ways to call javascript function after the whole web page is loaded.

When you work with jQuery/javascript, sometime you need to load whole web page and after that call/execute javascript functions.

1. First Simple Way

You also know that in HTML tag holds the actual content that is used to display to the users. Using the onload with HTML tag, you can execute the javascript function after the whole page is loaded. The onload event occurs whenever the element has finished loading.

You can do like:

      
Welcome to tutsmake.com
 
Execute Javascript Function After Page Load Example
  function afterPageLoad() 

2. Second Way

You can use the javascript window onload property. Which is used to call/execute javascript functions after the whole page is completely loaded.

You can do like:

window.onload = function afterWebPageLoad() < // Function to be executed >

      
Welcome to tutsmake.com
 
Execute Javascript Function After Page Load Example
    

Источник