在某个js文件中引入(动态加载)其它js文件的方法总结

分类:计算机 | 前端 | JavaScript | js的引用 308
更新:2022-02-16 18:31:36
编辑

说明

有时候我们需要在一个js文件中引入另外一个js文件,例如有多个html需要用到两个js文件,而我们想减少每个页面引用js文件的个数,如果在一个js文件中引用了另外一个js文件,那么我们在多个html页面中就可以只引用一个js文件了,下面总结几种实现方式:

方式1:document.write

在调用文件的顶部直接加入如下代码:

document.write("<script src='js/encryptionJS/SM-NoModule.js'><\/script>");

由于这种方式是异步加载,document.write会重写界面,不实用。而且谷歌浏览器会报警告Parser was blocked due to document.write()

方式2:jQuery的$.getScript

$.getScript("test.js",[callback]); //url

$.getScript方法是异步加载js文件,为了避免js执行出现逻辑顺序错误的问题,被加载的js文件中最好不要有函数执行的操作;

$.getScript可接受第二个参数,这个参数是一个回调函数,当js文件加载完成后,此回调函数执行,相应的业务逻辑(例如ajax请求)可以在此函数中调用。

方式3:动态创建script元素(异步)

<script type="text/javascript">
      function loadJs(url){
        var script=document.createElement('script');
        script.type="text/javascript";
        script.src=url;
        document.body.appendChild(script);
    }
    loadJs("main.js");
    loadJs("tooltip.js");
    loadJs("button.js");
    loadJs("bootstrap.js");
</script>

方式4:

function addScript(url){
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.setAttribute('src',url);
    document.getElementsByTagName('head')[0].appendChild(script);
}

总结

1、网上有一种说法是不推荐使用document.write的方式,但是我刚开始用的是jQuery的$.getScript,发现有问题,换成document.write以后就好了。

参考资料

https://blog.csdn.net/weixin_39291021/article/details/105389634

https://www.jb51.net/article/195401.htm