javascript - 即使我将 script 标签放在 body 标签末尾之前,Google Chrome 也会首先加载 javascript

标签 javascript html google-chrome


我在 Google Chrome 中加载 JavaScript 时遇到问题。
我使用简单的警报消息创建了单独的 js 文件,然后将其链接到 body 标记末尾之前。
谷歌浏览器首先显示警告框,然后当我单击“确定”时加载内容。
在其他浏览器中它工作正常,我的意思是警报框与网页内容同时显示。
简而言之,即使我将 script 标记放在 body 标记末尾之前,Google Chrome 也会首先加载 javascript。

alert("Hello World!");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Write Your First Program</title>
    <!-- Bootstrap Core CSS -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
     <link href="css/styles.css" rel="stylesheet">

</head>
<body>
    <!-- Header -->
     <header class="header">
        <div class="text-vertical-center">
            <h1>Write Your First Program</h1>
            <h3>JavaScript Essentials</h3>
            <br>
        </div>
    </header>

<script src="js/scripts.js"></script>
</body>
</html>

您知道如何解决这个问题吗? 非常感谢

最佳答案

你的问题是你的脚本有标签async,它让它执行而不关心网页加载状态。删除 async 标记,或将其替换为 defer,它会在页面加载后执行脚本。

为了防止脚本和 html/css 加载时间冲突的任何问题,您应该使用 window.onload = function() {//code here 封装 Javascript 的脚本}。这将保证在执行代码之前加载整个页面。

关于javascript - 即使我将 script 标签放在 body 标签末尾之前,Google Chrome 也会首先加载 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45503355/

相关文章:

javascript - 对我来说,出乎意料的是,Robot Framework 中的 javascript 返回值。为什么?

javascript - 我如何告诉 javascript 在序列化时不要将日期对象转换为 UTC

javascript - 如何在 AngularJS 中使用 $timeout 运行带参数的函数?

Javascript 使用现有对象属性创建对象属性

javascript - Angular 2路由参数更改,但组件不重新加载

css - 如何处理具有固定垂直和水平导航的页面

javascript - 第一个动画完成后调用第二个动画

javascript - 连接变量和函数名称

javascript - chrome 临时存储未重置

javascript - 如何获得浏览器的正确视口(viewport)大小