How do I call a JavaScript function on page load

Question

Traditionally  to call a JavaScript function once the page has loaded  you d add an onload attribute to the body containing a bit of JavaScript  usually only calling a function    lt body onload  foo    gt    When the page has loaded  I want to run some JavaScript code to dynamically populate portions of the page with data from the server  I can t use the onload attribute since I m using JSP fragments  which have no body element I can add an attribute to   Is there any other way to call a JavaScript function on load  I d rather not use jQuery as I m not very familiar with it

User · Answer

For detect loaded html  from server  inserted into DOM use MutationObserver or detect moment in your loadContent function when data are ready to use   x000D   x000D  let ignoreFirstChange   0  x000D  let observer    new MutationObserver  m  ob   gt  x000D    x000D    if ignoreFirstChange    gt  0  console log  Element added on   new Date     x000D    x000D     observe content   childList  true  subtree true     x000D   x000D   x000D     TEST  simulate element loading x000D  let tmp 1  x000D  function loadContent name      x000D    setTimeout     gt   x000D      console log  Element   name  loaded   x000D      content innerHTML      lt div gt My name is   name  lt  div gt     x000D      1500 tmp    x000D      x000D   x000D  loadContent  Senna    x000D  loadContent  Anna    x000D  loadContent  John    x000D   lt div id  content  gt  lt div gt  x000D   x000D   x000D

User · Answer

function yourfunction        do stuff on page load       window onload   yourfunction    Or with jQuery if you want     function       yourfunction          If you want to call more than one function on page load  take a look at this article for more information    Using Multiple JavaScript Onload Functions

User · Answer

here s the trick  works everywhere     r function    alert  DOM Ready         function r f   in  test document readyState  setTimeout  r   f     9  f

User · Answer

Another way to do this is by using event listeners  here how you use them   document addEventListener  DOMContentLoaded   function       you function             Explanation   DOMContentLoaded It means when the DOM Objects of the document are fully loaded and seen by JavaScript  also this could have been  click    focus      function   Anonymous function  will be invoked when the event occurs

User · Answer

Your original question was unclear  assuming Kevin s edit interpretation is correct then this first option doesn t apply The typical options is using the onload event   lt body onload  quot javascript SomeFunction   quot  gt        You can also place your javascript at the very end of the body  it won t start executing until the doc is complete   lt body gt           lt script type  quot text javascript quot  gt      SomeFunction       lt  script gt   lt  body gt   And  another options  is to consider using a JS framework which intrinsically does this     jQuery   document  ready  function        SomeFunction

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D       lt head gt  x000D           lt title gt Test lt  title gt  x000D           lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt  x000D           lt script type  text javascript  gt  x000D          function codeAddress     x000D              alert  ok    x000D            x000D          window onload   codeAddress  x000D           lt  script gt  x000D       lt  head gt  x000D       lt body gt  x000D       x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You have to call the function you want to be called on load  i e   load of the document page   For example  the function you want to load when document or page load is called  yourFunction   This can be done by calling the function on load event of the document  Please see the code below for more detail    Try the code below    lt script src  js jquery-1 11 0 min js  type  text javascript  gt  lt  script gt   lt script type  text javascript  gt         document  ready function              yourFunction                function yourFunction            some code        lt  script gt

User · Answer

If you want the onload method to take parameters  you can do something similar to this   window onload   function       yourFunction param1  param2        This binds onload to an anonymous function  that when invoked  will run your desired function  with whatever parameters you give it  And  of course  you can run more than one function from inside the anonymous function

[javascript] How do I call a JavaScript function on page load?

Examples related to javascript

Examples related to onload