Question

我遇到window.onload和document.onload事件的问题。我读到的所有内容都告诉我，在DOM完全加载其所有资源之前，这些内容不会触发，似乎这种情况不会发生在我身上：

我在Chrome 4.1.249.1036（41514）和IE 8.0.7600.16385中尝试了以下简单页面，结果相同：两者都显示消息“It failed！”，表示myParagraph未加载（因此DOM似乎不完整））。

<!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），但这对我来说似乎过于复杂。是否有更合适的事件要使用？

Answer 1

在加载时，主体仍未加载，因此您应按以下方式更正代码：

<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。

如前所述，使用js-frameworks将是一个更好的主意。

Answer 2

只需使用window.onload = doThis;代替window.onload = doThis();

Answer 3

了解()是运算符非常重要，就像+或&&一样。 ()使用函数并调用它。

因此，在这种情况下，doThis是一个函数对象，()是调用该函数的运算符。 doThis()组合在一起调用doThis，执行它，并计算doThis的返回值

所以window.onload = doThis()基本上将doThis的返回值分配给window.onload

因此，为了解决这个问题，你需要引用函数本身，而不是调用它。

执行window.onload = doThis

Answer 4

您是否尝试使用javascript库，例如jQuery并且它是$(document).ready()函数：

  $(document).ready(function() {
      // put all your jQuery goodness in here.
  });

Answer 5

这取决于你放置onload功能的位置（头部或身体标签还是向下），内部事件绑定在不同的浏览器中看起来略有不同。

另见 window.onload vs document.onload

window.onload似乎在加载DOM之前触发（JavaScript）

5 个答案: