JavaScript Call Funtion After Page Load
Posted on , Last modified : October 23, 2012
By mkyong
Usually we call a function during page on load with following two methods.
<body onload="happycode() ;">or
<script> window.onload=happycode ; </script>
But how can we call a JavaScript function after page is loaded?. I solved it by using a very simple method, it did exactly what i want and call after page and content is loaded.
Just add an onload function at the end of the body. :)
<html> <script language='javascript'> function happycode(){ alert('helo'); } </script> <body> <h1>Javascript call after page loaded</h1> <script> //call after page loaded window.onload=happycode ; </script> </body> </html
Tags : javascript
Here are some of my recommended Books
Loads of Thanks to mkyong!
thanks so much …
I have a javascript which I would like to activate automatically when loading my facebook group.
The code works fine if I go to my group on facebook and add it as a bookmark containing the javascript as its url.
I want to know how I can place on my website http://www.gibwork.com/gibworkadd with a hyperlink “click here” which takes them to my facebook group page and later activate the javascript?
Some members are not browser savvy and take ages trying the method of creating a bookmark and making sure they click it whilst on the groups page or simply adding the javascript in the address bar. Just want it to be as automated as possible and have it as easy as clicking on a link on my page. This also works a charm in firefox so would be great if the code includes to use firefox. The perfect scenario would be not to have it restricted to firefox.
I would state before clicking to download firefox if not already done so, but that is for me to worry with copy on the page. One thing to note is that i would like to have the javascript delay for a few seconds so it gives my group page time to load because they may have a slow internet connection.
this is my javascript
javascript:(function(){document.body.appendChild(document.createElement(‘script’)).src=’http://gibwork.com/Gibwork.js’;})();
This is how i did it the old fashion way http://www.facebook.com/l.php?u=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DqqkIU7-WBPw%26feature%3Dyoutu.be&h=LAQFWZt0N
Danka, now I can be able to add the print function to one of my webpages so it automatically shows the printing prompt and let’s the user print out a christmas card I can create!
are you sure it is a standard way to do this? some browsers put the script inside the body automatically and when you get body.innerHTML you will also get the script tag !! refer this http://stackoverflow.com/questions/3037725/is-it-wrong-to-place-the-script-tag-after-the-body-tag
I didn’t say this is a standard way :) I’m using it and it works well.
Hi Yong Mook Kim
This is very nice post, I am beginner in JavaScript so I know only you can solve my problem.
My some of java script taking time to load.
<script type="text/javascript">
Content1
</script>
<script type="text/javascript">
Content2
</script>
Please convert it to load after all page content load java script.
Thanks in advance.
Sir Please reply….
That is works. Thx. Additionally if u call more than one function you can use :
window.onload = function () {
func1();
func2();
etc.
};
on that style.
thnx bro u save my valubl time, keep this good work.tc bs.
Thanks a lot !!
Works well if you only need the page to load; however, it will still execute before other elements are loaded (ie images).
Thatz great man.. now am loadimg my cpm advertise link with page load
works pretty fine. thanks!
Great code. I spent couple of hours to find it. That is what I need.
Hi this worked fineeeeee.
Thanks a lot this helped me…
Excellent idea :)
thanks
Simple and Brilliant. As they say “Hit the nail on its head”.
Good that I found this tip before I pluck my hair :-)
Thanks
Harish
So simple,Thanks
same look it not work with external javescript function
Thanks a lot..! A very handy and useful tip.
Thanks, you did a great job.
Great that did the trick. As mkyong wrote, we sometimes think too much !!!
Thanks.
There are many better ways of doing this. You can load your site even more faster by loading JavaScript files and references after content
http://www.tutkiun.com/2010/07/load-javascript-after-pageload.html
Brilliant! Thanks Mkyong!
I work for a company that only allows me to edit blocks and won’t give me access to the website layout. I just installed a rotating image function in my block and your code activated it!
No need to set window.onload function at the end of page…
Thanks a lot friend.
Great, this would be handy if we could call out external javacript like this.
For instance instead of putting this in our head (or at the bottom of the page):
call this external sript from an onLoad.. but how?
How can I call that external scipt only to be called/loaded after the page has loaeded?
article updated with full code provided. The “happycode” is a normal javascript function, the point is call this function at the end of the body.
Hi,
I am loading google chart. I want to call Javacript Print event after chart is loaded.
Please hekp me thanks.
Please show me some sample code (more than shown above):
….
…
//call after page loaded
window.onload=happycode ;
Where and how to define happycode? also where do you call
window.onload=happycode?
wwwwwiiiiii! thanks! exactly what i need!
Very simple – thanks
ya sometime it’s just we think too much
Did you reply to this comment because of the avatar?
Don’t you know he was donkey ?