跳转页面后运行JavaScript

Question

跳转页面后运行JavaScript

3

我在一些pug文件中有以下javascript代码：

doctype html
html
    //- this is not firing for some reason
    head

        script(type="text/javascript").
          document.addEventListener('DOMContentLoaded', function() {
              console.log('ready!')
         }, false);

当我刷新页面时脚本才会运行，但是当我导航到页面时脚本不会触发。我正在寻找一个类似于onNavigate的事件，但是在这里：https://www.w3schools.com/jsref/dom_obj_event.asp和这里：https://developer.mozilla.org/en-US/docs/Web/Events都没有看到。

- xiaolingxiao

很有可能，当你的脚本被加载并附加到处理程序时，DOMContentLoaded事件已经触发了。 - Derek Pollard

我的建议是将您的代码放在if语句中，并检查document.readyState。 - Derek Pollard

@Derek DOMContentLoaded 应该在所有 HTML 加载完成后才触发，这样才能执行 JS。 - Barmar

@Derek 为什么刷新时会有所不同呢？它们都以相同的方式加载文档。 - Barmar

@Barmar同意，但根据我的个人经验，我遇到了相同的问题，这是因为代码位置的原因，在处理程序附加之前就触发了它。 - Derek Pollard

2个回答

2

你知道，页面的OnLoad事件会在任何CSS和JS加载完成后触发，包括外部引用。

你真正需要的是：

<body onload="do_this()">

然后在脚本元素中

function do_this(){
//  do sh1t
}

- rockmo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Johnsackson · Accepted Answer

如果您的代码按照这种方式编写，它应该能够正常工作。看不出任何问题。

<!doctype html>
   <html>
    <body>
      <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
           console.log('ready!')
        }, false);
      </script>
    </body>
   </html>

或者

<!doctype html>
<html>
<body>
<script type="text/javascript">
  window.onload = function() {
    console.log('ready!')
  };
</script>
</body>
</html>