在html文件里,加载javascript脚本,可以通过添加<script src="js脚本"></script>的方法来加载。
但是,有时候想要根据需要动态加载不同的脚本,或者设置不同的参数,需要怎么做呢?
可以利用DOM document的接口来实现。具体步骤:
注意
HTMLScriptElement 参考
https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement
- 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);
-
https://gist.github.com/zhangzhibin/9bfc7debf08a5300c0101e1c1f19a904