JavaScript 根据需要动态加载脚本并设置自定义参数

问题背景

在html文件里，加载javascript脚本，可以通过添加<script src="js脚本"></script>的方法来加载。

但是，有时候想要根据需要动态加载不同的脚本，或者设置不同的参数，需要怎么做呢？

解决方法

可以利用DOM document的接口来实现。具体步骤：

• 1). 创建script元素
  let scriptElement = document.createElement('script')
• 2). 设置script的脚本
  scriptElement.src = "js脚本路径"
• 3). 设置脚本的参数
  scriptElement.setAttribute(key, value)
• 4). 添加到document树上
  ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( scriptElement );

注意

• 1). 设置Script的自定义参数使用的是setAttribute方法，而不是直接scriptElement[key] = value。
• 2). 如果要异步加载，需要设置scriptElement.async = true

HTMLScriptElement 参考

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement

完整示例(TypeScript)

async function loadJsAsync(src:string, async:boolean=false, options?:any) {
  return new Promise<void>((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = async;
    if(options) {
      for(const key in options) {
        script.setAttribute(key, options[key]);
      }
    }

    let onload = () => {
      script.removeEventListener('load', onload);
      // 非异步加载的话，需要等待onload返回
      if(!async) {
        resolve();
      }
    };

    script.addEventListener('load', onload);
    script.addEventListener('error', (err) => {
      console.error(err);
      reject(new Error(`Failed to load ${src}`));
    });

    ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild.appendChild(script);
    // 异步加载直接返回
    if(async){
      resolve();
    }
  });
}

使用示例

    loadJsAsync(url, true, attributes);

gist地址

https://gist.github.com/zhangzhibin/9bfc7debf08a5300c0101e1c1f19a904