admin管理员组文章数量:1134247
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 the onload 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
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 the onload 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
Share Improve this question edited Aug 21, 2012 at 8:11 asked May 11, 2010 at 12:56 user321068user321068 3 |12 Answers
Reset to default 128I 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.
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/
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()">
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.
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.
In my case
window.addEventListener("load", function() {
myDropdownFunction();
});
surprisingly (for me) didn't help (I tried to set a value for dropdown when user uses browser backwards button). And window.onload didn't work for the reason Nick Craver♦ explained here above - it was overridden by <body onload="...">.
So I tried this using jQuery and it worked like a charm:
$(window).on('pageshow', function() {
alert("I'm happy");
});
In my case the problem was that my script was being loaded dynamically by another one (e.g.: with $.getScript()) and when it ran the window 'load' event had already fired.
My solution:
if (
document.readyState === "complete" ||
document.readyState === "interactive"
) {
// load event already fired, this may happen if this script is loaded dynamically.
// Run immediately.
execOnLoad();
} else {
// SEE: https://stackoverflow.com/questions/2810825/javascript-event-window-onload-not-triggered
window.addEventListener
? window.addEventListener("load", execOnLoad, false)
: window.attachEvent && window.attachEvent("onload", execOnLoad);
}
This works for me, i think your problem is somewhere else:
function resize(){
var tester = document.getElementById("tester"),
html = tester.innerHTML
tester.innerHTML = html + "resize <br />"
}
window.onload = resize;
window.onresize = resize;
you can test it yourself here: http://jsfiddle.net/Dzpeg/2/
are you sure its the only event called onLoad ? Maybe an other onLoad event creates a conflict
put "_blank" as the target param has solved in my case
let wind = open(url,"_blank","options here")
wind.onload = .... // works fine now
Just in case someone finds it useful, I was calling twice the function, instead of once:
window.onload = function() {...}
This will be work when you call the "window.onload" next to the function resize()
If it's really in that order, it's definitely not going to work. You can't assign a function to an event handler before the function itself is declared.
本文标签： JavaScript event windowonload not triggeredStack Overflow
版权声明：本文标题：JavaScript event window.onload not triggered - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736833654a1954806.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
onloadis being being overridden later, or is being attached after theloadevent fires? – Nick Craver Commented May 11, 2010 at 12:58