Question

我正在学习Javascript，对于为什么我在使用Chrome浏览器时在html之前加载javascript遇到问题感到非常困惑。当我使用Firefox和Edge时，页面会先加载html，然后会收到警报。但是，当我使用Chrome时，我会首先收到警报，并且背景为空白。到目前为止，我学到的所有内容似乎都说js脚本应该在html之后运行，因为它位于body标签的底部。

谢谢！

home.html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>
</head>
<body>
<h1>Hi, testing chrome.</h1>
<h2>Is this working?</h2>
<ul>
<li>list1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
<script type="text/javascript" src="myjs.js"></script>
</body>
</html>

myjs.js页面

alert("Am I working right?");

Answer 1

由于JavaScript是单线程的，所以当您调用alert（）函数时，由于它是一个UI阻止函数，它会阻止其他执行。

Answer 2

如果您想在js之前先加载html，请确保使用

包装它

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code here
});

Answer 3

您应该始终在JS文件中执行的某些操作是将所有直接代码和与DOM相关的功能放入函数中，以等待页面加载。

使用纯JavaScript

window.onload = function() {
    //Your JS here
};

请注意，根据this post，您可以使用document.onload(function() {...});

使用JQuery：

$(function() {
    //Your JS here
});

Answer 4

将代码放在Jquery文档准备方法中

Answer 5

在普通的JavaScript中，请在myjs.js中尝试

$(window).on("load", function(){
    var ss = document.createElement("script");
    ss.src = "myjs.js";
    ss.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(ss);
});

ELSE

如果已加载jQuery，请尝试此操作。

$(function() {
    alert("Am I wrong?");
});

您将需要添加

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js">

在标记中包含jQuery

这应确保页面已加载。但请注意，标记也是DOM的一部分

如果要求在加载HTML之后执行外部JS，则可以尝试这样做。

$(function() {
    var ss = document.createElement("script");
    ss.src = "myjs.js";
    ss.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(ss);
});

Answer 6

函数DOMContentLoaded允许浏览器在HTML内容加载后执行javascript代码

  document.addEventListener("DOMContentLoaded", function(event) { 
    /*it is verry easy now, you can write code here which will be executed when the 
     html content will end loading*/
  });

Answer 7

网络使用事件驱动模型对操作进行排序。您的假设是正确的：如果脚本出现在文档的末尾，那么它将比文档开始的末尾进行解析。但是HTML规范没有明确指定必须在执行脚本之前呈现HTML。因此，解析和渲染是不同的操作，chrome可能会选择在脚本解析完成后立即执行。

那么您如何正确地对操作进行排序？总体而言，网络（尤其是javascript）是事件驱动的。您的代码可以侦听各种事件，并根据需要对其做出响应。在这种情况下，您想在文档加载后执行脚本。看看DOMContentLoaded事件。

在这里，您的代码已修改为在触发DOMContentLoaded事件时运行。

document.addEventListener("DOMContentLoaded", function() {
  alert("Am I working right?");
});

我只是将您的警报功能调用封装在我的事件处理程序函数中。必须在发出事件的元素上注册事件处理函数（或回调），在本例中为document对象。这是通过使用两个参数在该对象上调用addEventListener()来完成的。第一个是我们要以字符串形式侦听的事件名称，第二个是触发事件时必须执行的函数。

为许多不同的元素定义了许多事件，您甚至可以定义自己的自定义事件并对其进行响应。

Chrome：在HTML之前加载JS

7 个答案: