Question

我已经尝试过自己找到答案，但只找到了有关如何使用onload事件的说明。我似乎忽略了这一点。

我已经被教导如果我想在页面加载时发生某些事情，我应该像这样使用window.onload：

<script>
    window.onload = dosomething();

    function dosomething()
    {
        window.alert('hello');
    }
</script>

但现在我正在考虑自己，我想知道这样做的重点是什么。因为这也会产生相同的结果：

<script>
    dosomething();

    function dosomething()
    {
        window.alert('hello');
    }
</script>

我放在<script>内的顶部的任何东西都会执行...那么window.onload是什么意思？

Answer 1

考虑这两个代码块：

<head>
     <script>
          alert(document.getElementById('foo').value);
     </script>
</head>
<body>
    <input id="foo" value="hello">
</body>

<head>
     <script>
          window.onload = function() {
              alert(document.getElementById('foo').value);
          }
     </script>
</head>
<body>
    <input id="foo" value="hello">
</body>

在第一个示例中，我们会收到错误，因为在脚本运行时找不到您引用的元素 - 因此您尝试获取value null }。

在第二个示例中，document.getElementById()将找到id为foo的元素，因为window.onload仅在加载完整DOM时才会被触发，因此该元素可用。

Answer 2

一旦DOM完成加载，

window.onload将会触发。在您的示例中，不需要DOM。但是，如果尚未加载DOM，则以下代码将失败：

function doSomething() {
  alert(document.getElementById('test').innerText);
}

// Throws: TypeError: Cannot read property 'innerText' of null

假设您的网页包含ID为test的元素，则会提醒其文字。

Answer 3

等待onload事件可确保您加载所有脚本和资源

假设您在页面中使用了jquery并且调用了一个直接使用它而没有onload的函数，您无法保证已经加载了jquery文件，这将导致错误并可能破坏您的整个逻辑< / p>

Answer 4

onload事件非常方便在运行脚本之前确保页面已完全加载。对于上面的示例，它没有意义，但如果您的页面仍然在底部加载项目并且您尝试调用它，则不会运行任何内容。

我建议使用jQuery并使用ready函数。这样您就可以确保页面完全加载。

$( document ).ready(function() {
  // This will only run after the whole page is loaded.
});

如果您不想加载查询，只需将您的javascript放在页面底部即可。这是最佳实践，并确保DOM完全加载。

有关jquery ready函数的更多信息，请访问：https://api.jquery.com/ready/

Answer 5

如果您使用dosomething();直接运行代码，则需要延迟浏览器的渲染时间，以便运行JavaScript代码。

您可以尝试将代码插入html文档的<head>：

<!DOCTYPE html>
<html>
<head>
<script>
dosomething();

function dosomething()
{
    window.alert('hello');
}
</script>
</head>
<body>
Does not render before the alert is dismissed!
</body>
</html>

您将看到该页面保持空白，直到您关闭该提醒。因此，浏览器运行JavaScript代码的每一秒钟都是您的用户必须等待呈现网站的第二步。

现在，如果您更改要在正文onload上运行的代码，则会在显示警告之前呈现页面：

<!doctype html> <html> <head> <script> function dosomething() { window.alert('hello'); } </script> </head> <body onload="dosomething()"> This page gets rendered before the alert! </body> </html>

为什么要使用window.onload

5 个答案: