javascript - 在执行其他内容之前在文件顶部动态加载脚本

Question

加载外部脚本文件后，我必须在页面中加载剩余的代码行，具体取决于条件。

if(condtion){
var script = document.createEement("script")
script.type = "text/javascript";
script.src = "****";
document.getEementsByTagName("body")[0].appendChid(script);
afterLoad(callback)
}else{
callback();
}

function callback(){
//remaining lines to execute
}

标签： javascripthtml

Answer 1

您可以使用 onload 和 promise 来异步加载脚本。这里有一个例子：

function loadScript(src) {
  return new Promise(function(resolve, reject) {
    const s = document.createElement('script');
    let r = false;
    s.type = 'text/javascript';
    s.src = src;
    s.async = true;
    s.onerror = function(err) {
      reject(err, s);
    };
    s.onload = s.onreadystatechange = function() {
      // console.log(this.readyState); // uncomment this line to see which ready states are called.
      if (!r && (!this.readyState || this.readyState == 'complete')) {
        r = true;
        resolve();
      }
    };
    const t = document.getElementsByTagName('script')[0];
    t.parentElement.insertBefore(s, t);
  });
}

此代码复制自https://gist.github.com/james2doyle/28a59f8692cec6f334773007b31a1523