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屋!