How to run a function when the page is loaded

Question

I want to run a function when the page is loaded  but I don   t want to use it in the  lt body gt  tag   I have a script that runs if I initialise it in the  lt body gt   like this   function codeAddress          code      lt body onLoad  codeAddress    gt    But I want to run it without the  lt body onload  codeAddress    gt  and I have tried a lot of things  e g  this   window onload   codeAddress    But it is not working   So how do I run it when the page is loaded

User · Answer

window onload will work like this    x000D   x000D  function codeAddress     x000D   document getElementById  test   innerHTML Date    x000D    x000D  window onload   codeAddress  x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D    lt title gt learning java script lt  title gt  x000D    lt script src  custom js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D    lt p id  test  gt  lt  p gt  x000D    lt li gt abcd lt  li gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Try readystatechange  document addEventListener  readystatechange        gt          if  document readyState     complete   codeAddress          where states are    loading - the document is loading  no fired in snippet  interactive - the document is parsed  fired before DOMContentLoaded complete - the document and resources are loaded  fired before window onload    x000D   x000D   lt script gt  x000D    document addEventListener  DOMContentLoaded        gt    x000D      mydiv innerHTML     DOMContentLoaded  timestamp    Date now     lt  br gt    x000D        x000D     x000D    window onload        gt    x000D      mydiv innerHTML     window onload  timestamp    Date now      lt  br gt     x000D        x000D   x000D    document addEventListener  readystatechange        gt    x000D      mydiv innerHTML     ReadyState    document readyState    timestamp    Date now     lt  br gt    x000D       x000D      if  document readyState     complete   codeAddress    x000D        x000D   x000D    function codeAddress     x000D      mydiv style color    red   x000D      x000D   lt  script gt  x000D   x000D   lt div id  mydiv  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Taking Darin s answer but jQuery style   I know the user asked for javascript    running fiddle    document  ready   function       alert  ok

User · Answer

Rather than using jQuery or window onload  native JavaScript has adopted some great functions since the release of jQuery  All modern browsers now have their own DOM ready function without the use of a jQuery library    I d recommend this if you use native Javascript   document addEventListener  DOMContentLoaded   function         alert  Ready        false

User · Answer

Alternate solution  I prefer this for the brevity and code simplicity    function          alert  I am here            This is an anonymous function  where the name is not specified  What happens here is that  the function is defined and executed together  Add this to the beginning or end of the body  depending on if it is to be executed before loading the page or soon after all the HTML elements are loaded

User · Answer

As soon as the page load the function will be ran    your function goes here        Alternatively  document onload   functionName    window onload   functionName

User · Answer

window onload   codeAddress  should work - here s a demo  and the full code    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       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           x000D           lt  script gt  x000D       lt  head gt  x000D       lt body onload  codeAddress     gt  x000D       x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Take a look at the domReady script that allows setting up of multiple functions to execute when the DOM has loaded  It s basically what the Dom ready does in many popular JavaScript libraries  but is lightweight and can be taken and added at the start of your external script file   Example usage      add reference to domReady script or place     contents of script before here  function codeAddress         domReady codeAddress

User · Answer

window onload   function         etc  is not a great answer    This will likely work  but it will also break any other functions already hooking to that event  Or  if another function hooks into that event after yours  it will break yours   So  you can spend lots of hours later trying to figure out why something that was working isn t anymore   A more robust answer here   if window attachEvent        window attachEvent  onload   yourFunctionName     else       if window onload            var curronload   window onload          var newonload   function evt                curronload evt               yourFunctionName evt                      window onload   newonload        else           window onload   yourFunctionName            Some code I have been using  I forget where I found it to give the author credit   function my function            whatever code I want to run after page load   if  window attachEvent   window attachEvent  onload   my function    else if  window addEventListener   window addEventListener  load   my function  false    else  document addEventListener  load   my function  false      Hope this helps

[javascript] How to run a function when the page is loaded?

Examples related to javascript

Examples related to html

Examples related to onload