JavaScript操作DOM动态加载<script>

思路

1、使用JavaScript创建DOM节点<script>。
2、使用JavaScript节点添加属性url即可。

实现

/**
 * 动态加载js文件
 * @param {获取js的远程路径} url 
 * @param {js加载成功后回调} successCallback 
 * @param {js加载失败后回调} errorCallbak 
 */
export function loadJavaScript(url, successCallback, errorCallbak) {
    const script = document.createElement("script");
    
    script.type = "text/javascript";
    script.src = url;
    
    script.onload = () => {
      successCallback();
    };

    script.onerror = () => {
      errorCallbak();
    };

    document.head.appendChild(script);
};
  • 测试调用:
let url = 'https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js';
      
loadJavaScript(url, () => {
console.log("======> 加载stomp.min.js成功");
}, () => {
console.log("======> 加载stomp.min.js失败");
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容