Question

我试图在脚本运行之前加载页面。我认为身体底部的脚本标签会实现这一点，但是，警报仍会首先弹出。如果有人知道为什么请帮助。

＆＃13;

 
<body>
  <h1>Website!</h1>
  <p> should load before script</p>
    
  <script>alert("hi")</script>
</body>

＆＃13;

编辑...我尝试了推荐的解决方案，但得到了与此处显示的相同的结果img 警报功能总是先运行还是我是傻瓜？此外，如果不清楚，我试图在警报发生之前显示网站的内容。

Answer 1

当浏览器开始加载HTML并遇到<script>时，它无法继续构建DOM。它首先执行脚本，如果脚本具有src，它将等待暂停构建DOM以便外部脚本加载和执行。

因此，首先获得alert()然后呈现HTML。您可以使用DOMContentLoaded事件等待DOM准备就绪，然后触发alert()

 <script>
    document.addEventListener("DOMContentLoaded", function(){
        alert("hi")
    });
 </script>

注意：async和defer属性script不暂停DOM构建，外部脚本在后台加载

Answer 2

＆＃13;

 
<body>
  <h1>Website!</h1>
  <p> should load before script</p>
    
  <script>
        document.addEventListener("DOMContentLoaded", function(){
            alert("hi")
        });
  </script>
</body>

＆＃13;

Answer 3

将alert("hi")替换为：

window.onload = () => {
  alert("hi");
};

Answer 4

您可以在窗口加载后编写以下内容来执行功能：

＆＃13;

<body>
  <h1>Website!</h1>
  <p> should load before script</p>
    
  <script>
  window.onload = function(){alert("hi")};
  </script>
</body>

＆＃13;

在html之前运行的脚本

4 个答案: