时间戳

首页 > 解决方案 > 为什么我的 HTML onload 事件属性在脚本元素中被忽略？

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

问题描述

<!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 属性会导致函数弹出窗口触发，但没有任何反应。我哪里错了？

标签： javascripthtmlonload

解决方案

在元素上，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);

推荐阅读