为什么我的 HTML onload 事件属性在脚本元素中被忽略了？

Question

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Test!!!</h1>
  <script onload="popup()">
    function popup() {
      console.log('popup function has been triggered!!!');
    }
  </script>

</body>

</html>

加载上述页面时，我希望 onload 属性会触发函数弹出窗口，但没有任何反应。我哪里错了？

Answer 1

在元素上，如果元素需要资源，则 load 事件会在该资源加载后触发。例如，这适用于使用单独文件的图像和<script> 标签。内联 JavaScript 标签不需要下载资源，所以它们不会触发 load 事件：因此，

<script onload="popup()">

不调用 popup。

只是运行 popup() 在普通脚本正文中：

<script> function popup() { console.log('popup function has been triggered!!!'); } popup(); </script>

如果要等待整个 DOM 加载完毕，请使用 DOMContentLoaded 侦听器：

window.addEventListener('DOMContentLoaded', popup);

Answer 2

您必须将 onload 属性传递给正文，而不是脚本标记。 ==> <body onload=fnc> 此外，最好将 defer 属性添加到您的脚本标签，以便它们运行在 DOM 加载

之后

Answer 3

启动函数不需要onload。我只需要随机数：

（那是 nunjucks 顺便说一句。）

Answer 4

在加载页面后立即执行 JavaScript：

在HTML中：

<body onload="console.log('popup function has been triggered!!!')">

在JavaScript中：

window.onload = popup();
function popup()
{
    console.log('popup function has been triggered!!!');
}

在JavaScript中，使用addEventListener()方法：

window.addEventListener('load', popup)
function popup()
{
    console.log('popup function has been triggered!!!');
}

为什么我的 HTML onload 事件属性在脚本元素中被忽略了？

Why is my HTML onload event attribute ignored in the script element?

html

javascript

onload