js 动态加载 script 脚本

js 动态加载 script 脚本

背景：在某些场景下可能需要引入一些外部 js，在 js 加载完成时还需要触发完成的回调。

加载 script 函数

/**
 * script加载资源
 * @param {*} url 资源url
 * @param {*} callback 加载完后的回调
 */
function loadScript(url, callback) {
  const script = document.createElement("script");
  script.type = "text/javascript";
  // IE兼容
  if (script.readyState) {
    script.onreadystatechange = function () {
      if (script.readyState == "loaded" || script.readyState == "complete") {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {
    //其他浏览器
    script.onload = function () {
      callback();
    };
  }
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

使用示例：

loadScript("./test.js", () => {
  console.log("加载成功完成回调");
});

有疑问的同学可以私信我、对帮助到同学欢迎大家收藏评论。