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

> 本文由 [简悦 SimpRead](http://ksria.com/simpread/) 转码， 原文地址 [xmanyou.com](https://xmanyou.com/javascript-dynamically-load-script-and-set-parameters/)

在 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](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](https://gist.github.com/zhangzhibin/9bfc7debf08a5300c0101e1c1f19a904)

<table data-hpc="" data-tab-size="8" data-paste-markdown-skip="" data-tagsearch-lang="TypeScript" data-tagsearch-path="loadJsAsync.ts"><tbody><tr><td data-line-number="1"></td><td>// JavaScript 根据需要动态加载脚本并设置参数</td></tr><tr><td data-line-number="2"></td><td>// refer to https://xmanyou.com/javascript-dynamically-load-script-and-set-parameters/</td></tr><tr><td data-line-number="3"></td><td>async function loadJsAsync(src:string, async:boolean=false, options?:any) {</td></tr><tr><td data-line-number="4"></td><td>return new Promise&lt;void&gt;((resolve, reject) =&gt; {</td></tr><tr><td data-line-number="5"></td><td>const script = document.createElement('script');</td></tr><tr><td data-line-number="6"></td><td>script.src = src;</td></tr><tr><td data-line-number="7"></td><td>script.async = async;</td></tr><tr><td data-line-number="8"></td><td>if(options) {</td></tr><tr><td data-line-number="9"></td><td>for(const key in options) {</td></tr><tr><td data-line-number="10"></td><td>// script[key] = options[key];</td></tr><tr><td data-line-number="11"></td><td>script.setAttribute(key, options[key]);</td></tr><tr><td data-line-number="12"></td><td>}</td></tr><tr><td data-line-number="13"></td><td>}</td></tr><tr><td data-line-number="14"></td><td></td></tr><tr><td data-line-number="15"></td><td>let onload = () =&gt; {</td></tr><tr><td data-line-number="16"></td><td>script.removeEventListener('load', onload);</td></tr><tr><td data-line-number="17"></td><td>// resolve in onload callback for async loading</td></tr><tr><td data-line-number="18"></td><td>if(!async) {</td></tr><tr><td data-line-number="19"></td><td>resolve();</td></tr><tr><td data-line-number="20"></td><td>}</td></tr><tr><td data-line-number="21"></td><td>};</td></tr><tr><td data-line-number="22"></td><td></td></tr><tr><td data-line-number="23"></td><td>script.addEventListener('load', onload);</td></tr><tr><td data-line-number="24"></td><td>script.addEventListener('error', (err) =&gt; {</td></tr><tr><td data-line-number="25"></td><td>console.error(err);</td></tr><tr><td data-line-number="26"></td><td>reject(new Error(`Failed to load ${src}`));</td></tr><tr><td data-line-number="27"></td><td>});</td></tr><tr><td data-line-number="28"></td><td></td></tr><tr><td data-line-number="29"></td><td>// document.head.appendChild(script);</td></tr><tr><td data-line-number="30"></td><td>( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( script );</td></tr><tr><td data-line-number="31"></td><td></td></tr><tr><td data-line-number="32"></td><td>// resolve immediately for sync loading</td></tr><tr><td data-line-number="33"></td><td>if(async){</td></tr><tr><td data-line-number="34"></td><td>resolve();</td></tr><tr><td data-line-number="35"></td><td>}</td></tr><tr><td data-line-number="36"></td><td>});</td></tr><tr><td data-line-number="37"></td><td>}</td></tr><tr><td data-line-number="38"></td><td></td></tr><tr><td data-line-number="39"></td><td>export { loadJsAsync }</td></tr></tbody></table>