javascript - 在从同一个 js 文件继续另一个代码之前添加两个脚本标签（在正文中）

Question

如何修改以下代码？在从函数 yourCodeToBeCalled 添加下一个代码之前，我想准确加载 两个 脚本。有人可以给初学者一个提示吗？我在评论后给出了我的建议//。

var loadJS = function(url, implementationCode){//url, url_Next
    //url is URL of external file, implementationCode is the code
    //to be called from the file, location is the location to 
    //insert the <script> element

    var scriptTag = document.createElement('script');//will add scriptTag_Next
    scriptTag.type = 'text/javascript';
    scriptTag.setAttribute('nonce','22os9h3sdfa');
    scriptTag.src = url;

    scriptTag.onload = implementationCode;//Will It be work? -> scriptTag.onload = scriptTag_Next = implementationCode;
    scriptTag.onreadystatechange = implementationCode;//like as above scriptTag_Next.onreadystatechange ??

    document.body.appendChild(scriptTag);
};
var yourCodeToBeCalled = function(){
    console.log('okay'); } loadJS('js/jquery-3_1_1.min.js', yourCodeToBeCalled);//My my suggestion loadJS('js/jquery-3_1_1.min.js', 'js/test.js' yourCodeToBeCalled)

我借用的原始代码：link

Answer 1

好的，我找到了一种逐个执行脚本的方法。由于加载脚本的顺序不正确，不再出现错误，例如：下一个脚本使用jQuery命令时缺少jQuery框架。所以我决定使用promises。

var loadJS = function(url) { /*url is URL of external file*/
    return new Promise(function(resolve, reject) {
        var scriptTag = document.createElement('script');
        scriptTag.type = 'text/javascript';
        scriptTag.setAttribute('nonce', '22os9h3sdfa');
        scriptTag.onload = resolve;
        scriptTag.onerror = reject;
        scriptTag.src = url;
        document.body.appendChild(scriptTag);
    });
};

loadJS('js/jquery-3_1_1.min.js').then(() => { return loadJS('js/library.js'); }).then(() => {

    var $ = jQuery.noConflict();//jQuery.noConflict();
});

现在 'jquery-3_1_1.min.js' 在 'library.js' 等之后执行。

您好！

Answer 2

我不确定您为什么要将脚本元素添加到 location 元素。 而不是

location.appendChild(scriptTag);

你可以试试

document.body.appendChild(scriptTag);

Answer 3

假设我正确理解您的要求，loadJS 是一个函数，所以只需调用它两次，然后调用您的代码：

(function() {
  var head = document.getElementsByTagName('head')
  loadJS('somescript.js', function() { console.log('on load') }, head)
  loadJS('somescript2.js', function() { console.log('on load2') }, head)

  // This is your code to execute once the scripts have loaded.
  console.log('Okay');
})();

此外，您还需要从 loadJS 中删除 scriptTag.async = true; 行，以便强制它等待直到加载完毕后再继续执行。

编辑：根据您最近的更改，您可以省略中间参数（回调），它将不需要。

编辑：鉴于您的最新更改，此代码应该可以工作：

(function() {
  loadJS('somescript.js')
  loadJS('somescript2.js')

  // This is your code to execute once the scripts have loaded.
  console.log('Okay');
})();

现在你在loadJS中有document.body.appendChild，你不需要传递元素。此外，您不需要使用回调，只需在 2 次 loadJS 调用之后调用您的代码（假设您已删除 async 属性）。