Question

出于我的目的，我希望能够从HTML页面（file.html）加载JavaScript库（file1.js），并在file1.js内加载file2.js。然后，我希望file2.js的功能能够在file.html中运行，而不必直接从file.html加载它。

此外，从file.html成功加载file1.js，并且从file1.js成功加载file2.js。但是，无法在file.html中访问file2.js的功能。我该怎么办？

这是我的代码：

file.html：

<script src="../path/to/file1.js">
functionFromFile2(); // This doesn't work!
</script>

file1.js：

var script = document.createElement("script");
script.src = "../path/to/file2.js";
script.onload = script.onreadystatechange = init1;
document.head.appendChild(script);

var init1 = function() {
  functionFromFile2(); // This works!
}

file2.js

function functionFromFile2() {
  // code...
}

如何在file.html中使用functionFromFile2（）？顺便说一句，这个问题是没有上下文的，并且需要此设置-我无法合并这两个文件。我也不想引用file.html中的file2.js，因为file2.js的路径可以更改，并且file.html和file1.js都使用file2.js中的函数。

我不需要动态导入，但是，如果我可以使用动态导入，那么我可以将file.html中的单行保留为目标，将其仅保留为一行。我知道在此示例中并不需要它，但这是因为这是一个示例，而在我的实际版本中则是必需的。

我需要香草JavaScript。请没有图书馆！我确定有某种图书馆可以满足我的需求，但我想保留我的项目％100香草。

Answer 1

您似乎想要javascript“ includes” :)可能无法预见。但是您可能会想到通过ajax获取脚本源的想法。编写一个小型的预处理器来加载其他文件，然后将它们组合在一起。此时，它只是文本，然后按照您的想法向dom中添加新的脚本对象，或者只是评估最终字符串。这也将使所有函数和变量都可用。

                function GetText(url, fkt) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState === 4 && this.status === 200) {
                        return this.responseText;
                    }
                }
                xhttp.open("GET", url, false);
                xhttp.send();
                if (typeof fkt === 'undefined') {
                    return xhttp.responseText;
                } else {
                    return fkt(xhttp.responseText);
                }
            }

这将为您提供任何类型的文件。您还可以添加一个函数来对脚本中的文件进行处理。现在我们要做一个

     var src=GetText("../js/script2.js");
     eval(src);

或

     var dynamicURL ="./js/startrek.js"

     var src=GetText(dynamicURL);
     eval(src);

请注意，评估的范围也可以限于对象。如您所见，您可以将脚本位置也更改为变量。另请参见此不错的教程Dynamic add scripts

Answer 2

我认为您需要使用自定义事件。这样，您可以让HTML中的代码知道文件何时加载到file1中。

Link to example code

示例（模拟文件1的超时）

<script type="text/javascript">
  // Pretending to be File1 (Aysnc Stuff)
  (function() {
    function init() {
      console.log('The file loaded, creating an event to let the document know')
      var fileReadyEvent = new CustomEvent('file2ready');
      document.dispatchEvent(fileReadyEvent);
    }
    setTimeout(init, 2000);
  })();
  
</script>

<script type="text/javascript">
  (function() {
    function doStuff() {
      console.log('Im doing stuff');
    }
    document.addEventListener('file2ready', doStuff);
  })();
  
</script>

注意：自定义事件在旧版Internet Explorer中不受支持，因此需要使用polyfill来支持旧版浏览器。另外，如果您使用的是jquery，则它具有/具有带有trigger（）和on（）的自定义事件。

从另一个JS库加载JS库，并让页面使用它

2 个答案: