window.onload 似乎在加载 DOM 之前触发(JavaScript) [英] window.onload seems to trigger before the DOM is loaded (JavaScript)
问题描述
我遇到了 window.onload 和 document.onload 事件的问题.我读到的一切都告诉我，在 DOM 完全加载其所有资源之前，这些不会触发，这对我来说似乎不会发生:
I am having trouble with the window.onload and document.onload events. Everything I read tells me these will not trigger until the DOM is fully loaded with all its resources, it seems like this isn't happening for me:
我在 Chrome 4.1.249.1036 (41514) 和 IE 8.0.7600.16385 中尝试了以下简单页面，结果相同:都显示消息It failed！"，表明 myParagraph 未加载(因此 DOM 似乎不完整).
I tried the following simple page in Chrome 4.1.249.1036 (41514) and IE 8.0.7600.16385 with the same result: both displayed the message "It failed!", indicating that myParagraph is not loaded (and so the DOM seems incomplete).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript">
window.onload = doThis();
// document.onload gives the same result
function doThis() {
if (document.getElementById("myParagraph")) {
alert("It worked!");
} else {
alert("It failed!");
}
}
</script>
</head>
<body>
<p id="myParagraph">Nothing is here.</p>
</body>
</html>
我在外部 .js 文件中使用了比这更复杂的脚本，但这说明了问题.我可以通过让 window.onload 设置一个半秒的计时器来运行 doThis() 来让它工作，但这似乎是一个不雅的解决方案，并且没有回答为什么 window.onload 似乎没有像大家说的那样做的问题.另一种解决方案是设置一个计时器来检查 DOM 是否已加载，如果没有，它将在半秒后调用自己(因此它会一直检查直到 DOM 加载)，但这对我来说似乎过于复杂.
I am using more complex scripts than this, in an external .js file, but this illustrates the problem. I can get it working by having window.onload set a timer for half a second to run doThis(), but this seems like an inelegant solution, and doesn't answer the question of why window.onload doesn't seem to do what everyone says it does. Another solution would be to set a timer that will check if the DOM is loaded, and if not it will just call itself half a second later (so it will keep checking until the DOM is loaded), but this seems overly complex to me.
有没有更合适的事件可以使用?
Is there a more appropriate event to use?
推荐答案
在加载窗口时，正文仍未加载，因此您应该按以下方式更正代码:
At the time window is loaded the body isn't still loaded therefore you should correct your code in the following manner:
<script type="text/javascript">
window.onload = function(){
window.document.body.onload = doThis; // note removed parentheses
};
function doThis() {
if (document.getElementById("myParagraph")) {
alert("It worked!");
} else {
alert("It failed!");
}
}
</script>
经测试可在 FF/IE/Chrome 中工作，但也考虑处理 document.onload.
Tested to work in FF/IE/Chrome, although thinking about handling document.onload too.
如前所述，使用 js-frameworks 会是一个更好的主意.
As already mentioned, using js-frameworks will be a far better idea.
这篇关于window.onload 似乎在加载 DOM 之前触发(JavaScript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
