Advanced Search

how to run multiple onload functions through JavaScript

/ Published in: JavaScript
Save to your folder(s)
by tutorialized.com

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Here is a basic tutorial on how to have multiple onload functions.
  2.  
  3. First we need an array to store the functions we wish to have executed onload. We will call it myonload.
  4. Javascript Code:
  5. var myonload = [];
  6.  
  7. To add a function to onload, in this case, a function called my_function, and another called another_function, we simply do
  8. Javascript Code:
  9. // These functions must have been defined before you add them to the array
  10. myonload.push(my_function);
  11. myonload.push(another_function);
  12.  
  13. push() adds an element to the end of an array (and returns the new length of the array.) You could also do myonload[myonload.length] = my_function; if you please, but I prefer the push() method. push() at w3schools
  14.  
  15. Now we have an array of functions we want to execute onload. I will explain how to add the onload handler later, but here is our function to run these functions.
  16. Javascript Code:
  17. function doonload()
  18. {
  19. 	var len; // initialize variable
  20. 	if( (len = myonload.length) ) // if we added any functions to our array
  21. 	{
  22. 		for( var i=0; i<len; i++ ) // iterate over each item in the array
  23. 		{
  24. 			myonload[i]();
  25. 			/*
  26. 			 * () after the current item to execute the function.
  27. 			 * Without () after the variable it would do nothing.
  28. 			 */
  29. 		}
  30. 	}
  31. }
  32.  
  33. Now that we have our array of onload functions, and a function to execute them, we need to tell the browser to run them when it finishes loading. One way, is to call our doonload function with the onload attribute of the <body> tag.
  34. HTML Code:
  35. <body onload="doonload();">
  36.  
  37. That is not our best option of course. A better way of doing this is with a little tidbit of Javascript that adds doonload as the handler for the onload event. This has to be done AFTER the function declaration of doonload.
  38. Javascript Code:
  39. if( window.addEventListener ) // if the browser supports addEventListener
  40. {
  41. 	window.addEventListener("load", doonload, false);
  42. }
  43. else if( window.attachEvent ) // otherwise, if it suuports attachEvent
  44. {
  45. 	window.attachEvent("onload", doonload);
  46. }
  47.  
  48. All of it put together:
  49. Javascript Code:
  50. var myonload = [];
  51.  
  52. myonload.push(my_function);
  53. myonload.push(another_function);
  54.  
  55. function doonload()
  56. {
  57. 	var len;
  58. 	if( (len = myonload.length) )
  59. 	{
  60. 		for( var i=0; i<len; i++ )
  61. 		{
  62. 			myonload[i]();
  63. 		}
  64. 	}
  65. }
  66.  
  67. if( window.addEventListener )
  68. {
  69. 	window.addEventListener("load", doonload, false);
  70. }
  71. else if( window.attachEvent )
  72. {
  73. 	window.attachEvent("onload", doonload);
  74. }

URL: http://www.tutorialized.com/view/tutorial/Multiple-onload-functions/36969

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.