时间戳

首页 > 解决方案 > 在正文中的脚本执行之前加载一个外部 js 文件（没有 jQuery）

javascript - 在正文中的脚本执行之前加载一个外部 js 文件（没有 jQuery）

问题描述

我有一个网站应该先加载外部 js 代码，然后再在 dom 中执行代码，但我不会工作。每次我的外部代码在 body 标记中的 js 之后加载时，会导致诸如未定义的类和变量之类的问题

索引.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>Site</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./project/load.js"></script>
</head>
<body>
    <h1>project</h1>
    <div id="project"></div>
    <script src="./script.js"></script>
</body>
</html>

./project/load.js

window.onload = function() {
    var links = ["./project/script1.js", "./project/script2.js", "./project/script3.js"];
    for(var link of links) {
        var script = document.createElement("script");
        script.src = link + "?0";
        script.setAttribute("onerror", "reload(this)");
        document.head.append(script);
    }
}

我也试过'addEventListener('DOMContentLoaded', function() {...});' 但它也确实有效。

我希望你能帮助我。

编辑1：请求订单

./project/load.js

./script.js

./project/script1.js

./project/script2.js

./project/script3.js

标签： javascript

解决方案

使用 defer 属性加载您的 javascript。将您的 HTML 替换为以下内容。“defer”属性允许 javascript 仅在页面加载完成后运行。意味着 DOM 可用

<!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>Site</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>project</h1>
    <div id="project"></div>
    <script src="./project/load.js" defer></script>
    <script src="./script.js" defer></script>
</body>
</html>

参考资料和进一步阅读

  1. https://www.sitepoint.com/introduction-jquery-deferred-objects/
  2. https://www.w3schools.com/tags/att_script_defer.asp

推荐阅读