先加载一个外部javascript文件，然后再加载另一个

Load an external javascript file before another?

本文关键字：加载 文件 然后 另一个 javascript 一个 外部      更新时间：2023-09-26

我的html页面中有两个外部javascript文件。

我需要确保第一个文件script1.js在我的第二个脚本script2.js.之前运行

我把它们放在我的html页面的主体中；如何确保在运行script1中的函数之前不使用script2？

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <!-- Script 1 -->
    <script src="js/script1.js"></script>
    <!-- Script 2 -->
    <script src="js/script2.js"></script>
</body>
</html>

浏览器将按照找到脚本的顺序执行脚本。如果调用外部脚本，它将阻塞页面，直到加载并执行该脚本为止。

所以如果你的代码是：

<body>
    <!-- Script 1 -->
    <script src="js/script1.js"></script>
    <!-- Script 2 -->
    <script src="js/script2.js"></script>
</body>

脚本1将在脚本2之前运行。

<script>标签为您管理它。。。但是继续阅读…

JavaScript是同步的，这意味着默认情况下它将逐行执行。。。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <!-- Script 1 -->
    <script src="js/script1.js"></script> <!-- first gets executed and get finished -->
    <!-- Script 2 -->
    <script src="js/script2.js"></script> <!-- then second gets executed and get finished -->
</body>
</html>

但同时JavaScript也可能是异步的。。。

因此，<script>标签有一个属性使加载异步。。。脚本标记上的async属性。。。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <!-- Script 1 -->
    <script src="js/script1.js" async></script> <!-- load asynchronously -->
    <!-- Script 2 -->
    <script src="js/script2.js" async></script> <!-- load asynchronously -->
</body>
</html>

定义和用法


异步属性是一个布尔属性。

当存在时，它指定将执行脚本一旦可用，就立即异步发送。

注意：async属性仅用于外部脚本（只有在src属性存在的情况下才应使用）

注意：有几种方式可以执行外部脚本：

如果存在async：脚本与页面的其余部分（脚本将在页面继续时执行解析）如果async不存在并且defer存在：脚本在页面完成解析时执行如果既不是async也不是defer存在：脚本被立即获取并执行，在浏览器继续解析页面之前

您无法检查它是否正在运行。您只能使用jQuery观察加载，并在第二个脚本完成时附加它。

HTML:

<script id="first" src="js/script1.js"></script>

JS:

$("#first").on("load", function() {
    $("head").append('<script src="js/script2.js"></script>');
});

为了确保以正确的方式加载所有脚本，您必须使用一些依赖关系处理库，如RequireJS，允许您在正确加载声明的依赖关系时执行代码。

如果你愿意，你可以自己使用jQuery.getScript之类的东西来完成，或者用所有的javascript来完成。

我知道您使用的是javascript，但如果您有jQuery，您可以使用（2）document.ready函数，并加载这些脚本文件。每个document.ready将（使用deferred）对每个进行排队。

$(function() {  // same as document.ready
     $.getScript('script1.js');
});
$(function() {
     $.getScript('script2.js');
});

取自：

  • 多个$（文档）就绪功能

  • 如何在jquery mobile/phonegap 的$（document）.ready（）/onDeviceReady（）上加载脚本

function loadJS(file) {
    // DOM: Create the script element
    var jsElm = document.createElement("script");
    // set the type attribute
    jsElm.type = "application/javascript";
    // make the script element load file
    jsElm.src = file;
    // finally insert the element to the body element in order to load the script
    document.body.appendChild(jsElm);
}

myScript.src = 'http://code.jquery.com/jquery-2.1.4.min.js';
myScript.onload = function() { 
  loadJS("js/script2.js")
};

您的第一个脚本添加了新函数

function firstScriptFunction(){
 //i have done nothing here
}

您的Html页面

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <!-- Script 1 -->
    <script src="js/script1.js"></script>
    <!-- Script to load script 2 -- >
    <script type="text/javascript">
       function loadSecondScript() {
            if (!(typeof firstScriptFunction == 'function')) {
                window.setTimeout(loadSecondScript, 3000);
            }
            else {
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'js/script2.js';
                document.getElementsByTagName('body')[0].appendChild(script);
            }
        }
        $(document).ready(function(){
          loadSecondScript();
       });
    </script>
</body>
</html>

您可以使用jquery并尝试以下操作参考-https://api.jquery.com/jquery.getscript/

$.getScript("js/script1.js", function() {
  console.log("script 1 loaded");
  $.getScript("js/script2.js",  function() {
      console.log("script 2 loaded");
   });
});

相关文章：