12

我在window.onload和document.onload事件方面遇到了麻烦。我读到的所有内容都告诉我，在 DOM 完全加载其所有资源之前，这些不会触发，这对我来说似乎没有发生：

我在 Chrome 4.1.249.1036 (41514) 和 IE 8.0.7600.16385 中尝试了以下简单页面，结果相同：都显示消息“失败！”，表示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 加载完毕），但这对我来说似乎过于复杂。

有没有更合适的事件可以使用？

4

5 回答 5

10

只需使用window.onload = doThis;而不是window.onload = doThis();

于 2010-06-04T12:13:03.803 回答
9

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

<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 将是一个更好的主意。

于 2010-03-21T00:14:22.680 回答
8

重要的是要理解它()是一个运算符，就像+or一样&&。()接受一个函数并调用它。

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

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

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

做window.onload = doThis

于 2016-07-04T02:17:31.203 回答
1

您是否尝试过使用 javascript 库，例如jQuery和它的$(document).ready()功能：

  $(document).ready(function() {
      // put all your jQuery goodness in here.
  });
于 2010-03-21T00:00:17.040 回答
1

这取决于您将 onload 函数放在哪里（head 或 body 标记或更下方），内部事件绑定在不同的浏览器中似乎略有不同。

另请参阅 window.onload 与 document.onload

于 2011-09-10T12:37:38.677 回答