Question

我刚刚开始使用JavaScript，并且我跟随此在线课程，声称如果我在<script>之前的页面底部插入<body>标记关闭标签我应该能够首先看到网站渲染，然后是JavaScript代码，但它实际上是执行相反的方式，JavaScript代码首先执行，直到我点击＆＃34; OK＆＃ 34;在弹出的消息上，我能够看到网站完全呈现。

这是代码

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/main.css">
  <title>JavaScript Basics</title>
 </head>
<body>
  <div class="container">
  <h1>Where to place your JavaScript code.</h1>
  </div>
  <script src="scripts.js"></script>
</body>
</html>

scripts.js中

alert("This text should appear after page is fully rendered");

老实说，我不知道这是代码应该如何工作的。 alert(); 脚本总是先执行？也许浏览器与它有关？（我使用的是最新版本的Chrome）。无论如何，对于所发生的事情的一个很好的解释将非常感激。

Answer 1

就个人而言，我会做更多的事情：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/main.css">
  <title>JavaScript Basics</title>
 </head>
<body>
  <div class="container">
  <h1>Where to place your JavaScript code.</h1>
  </div>
  <script>
  window.onload = function() {
      alert('This should now load after the page.');
  }
  </script>
</body>
</html>

window.onload = fun...表示“等到页面加载完毕”。根据浏览器的决定（图像，布局，插件等），这可能适用于您，也可能不适用。

甚至可能是：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/main.css">
  <title>JavaScript Basics</title>
 </head>
<body>
  <div class="container">
  <h1>Where to place your JavaScript code.</h1>
  </div>
  <script async defer src="scripts.js"></script>
</body>
</html>

使用此示例，async属性表示“在后台抓取此脚本文件”，defer表示“等到页面加载后执行它”。

alert（）脚本在网站内容加载之前弹出（即使我在html文件的底部插入了标签）

1 个答案: