JavaScript event window.onload not triggered
Solution 1
I think what's probably happening here is that your window.onload
is being overridden later, check to make sure that it's not via things like <body onload="">
You can check this by alert(window.onload)
in your re-size function, to see what's actually attached there.
Solution 2
I had this happen when I added 3rd party jQuery code we needed for a partner. I could have easily converted my antiquated window.onload to a jQuery document ready. That said, I wanted to know if there is a modern day, cross browser compatible solution.
There IS!
window.addEventListener ?
window.addEventListener("load",yourFunction,false) :
window.attachEvent && window.attachEvent("onload",yourFunction);
Now that I know ... I can convert my code to use the jQuery route. And, I will ask our partner to refactor their code so they stop affecting sites.
Source where I found the fix --> http://ckon.wordpress.com/2008/07/25/stop-using-windowonload-in-javascript/
Solution 3
Move the window.onload line to the end of the javascript file or after the initial function and it will work:
function resize(){
heightWithoutHeader = (window.innerHeight - 85) + "px";
document.getElementById("main-table").style.height = heightWithoutHeader;
document.getElementById("navigation").style.height = heightWithoutHeader;
}
// ...
// at the end of the file...
window.onload = resize;
window.onresize = resize;
But it's a best practice if you don't replace the onload too. Instead attach your function to the onload event:
function resize(){
heightWithoutHeader = (window.innerHeight - 85) + "px";
document.getElementById("main-table").style.height = heightWithoutHeader;
document.getElementById("navigation").style.height = heightWithoutHeader;
}
// ...
// at the end of the file...
window.addEventListener ?
window.addEventListener("load",resize,false)
:
window.attachEvent && window.attachEvent("onload",resize);
That worked for me and sorry for my english.
Solution 4
This answer is for those who came here because their window.onload does not trigger.
I have found that for the following to work
window.onload = myInitFunction;
or
window.addEventListener("load", myInitFunction);
the referred function (myInitFunction in this case) must reside (or be defined) within the same <script>-element or in a <script>-element that occurs before the <script>-element where the onload event is established. Otherwise it will not work.
So, this will not work:
<html>
<head>
<title>onload test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
window.addEventListener("load", myInitFunction)
</script>
<script>
function myInitFunction() {
alert('myInitFunction');
}
</script>
</head>
<body>
onload test
</body>
</html>
But this will work:
<html>
<head>
<title>onload test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function myInitFunction() {
alert('myInitFunction');
}
</script>
<script>
window.addEventListener("load", myInitFunction)
</script>
</head>
<body>
onload test
</body>
</html>
And this will work (since we only have one <script>-element):
<html>
<head>
<title>onload test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
window.addEventListener("load", myInitFunction)
function myInitFunction() {
alert('myInitFunction');
}
</script>
</head>
<body>
onload test
</body>
</html>
If you for some reason have two <script>-elements and cannot (or do not want to) merge them and you want the onload to be defined high up (i.e. in the first element), then you can solve it by
instead of writing
window.onload = myInitFunction;
you write
window.onload = function() { myInitFunction() };
or, instead of writing
window.addEventListener("load", myInitFunction);
you write
window.addEventListener("load", function() { myInitFunction() });
Another way to solve it is to use the old
<body onload="myInitFunction()">
Solution 5
For me, window.onload
was not working when wrote inside script type="text/javascript
tag.
Instead, needed to write the same in script language="Javascript" type="text/javascript
tag and it worked fine.
Admin
Updated on October 27, 2021Comments
-
Admin over 2 years
I've got the following code in a website:
window.onload = resize; window.onresize = resize; function resize(){ heightWithoutHeader = (window.innerHeight - 85) + "px"; document.getElementById("main-table").style.height = heightWithoutHeader; document.getElementById("navigation").style.height = heightWithoutHeader; }
The
onresize
works fine, but theonload
event never fires. I've tried it in Firefox and Chrome and neither of them works.Thank you for your help and go for the reputation! ;D
-
Syntactic about 14 yearsAs Nick Craver said, it would be helpful to know the larger context of this and when it's actually being called.
-
Francois over 12 yearswrong answer: in the same javascript scope it is allowed, but not recommended, to declare a variable or function after its use. try : "var a = fun(42); function fun(n) { return n; }; console.log(a);"
-
Shayan over 4 yearsI don't understand why but this code is not working for me. I replaced
yourFunction
with my functionrunCode
I even moved the addEventListener line to the bottom of my script as suggested below. -
Shayan over 4 yearsI know the ternary operator but I don't understand what
window.addEventListener ?
does, does it check if an event listener already exists on window? -
Adal about 4 yearsThis worked for me. Thank god. Note that you need to have a function to call ;-) I placed it in the <head>
-
Burhan Ul Haqq Zahir about 3 yearsThanks you save my day its working for me too.
-
Shmack almost 3 yearsI was unaware that
window.onload
would get overwritten if you had it in multiple .js files, which makes sense, but nice to know! -
LysanderM almost 3 yearsA little note for who has similar issue. In my case, I've used dynamic HTML, populating inside document via
win = window.open("about:blank","",""); win.document.write(htmlcontent);
. But my javascript form commit action was never triggered, due to theonload
event was not called. I've addedwin.onload(null);
via this answer, and it worked. -
Benjamin over 2 yearsImportant to say that the window.onload event can be cut and paste down the script after the body onload code fires. Then the window.onload script will work as well.