javaScript动态加载js文件_js load js-CSDN博客

本文链接：https://blog.csdn.net/chaopingyao/article/details/105199833

本文介绍了两种动态加载JS文件的方法：一是使用原生JS代码，通过创建script元素并监听其加载状态；二是利用document.write()或document.writeln()，但后者会重绘整个页面。文章详细解释了每种方法的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、利用原生js代码加载js文件

function loadJS( url, callback ){
    var script = document.createElement('script'),fn = callback || function(){};
    script.type = 'text/javascript';
    if(script.readyState){//IE
        script.onreadystatechange = function(){
            if( script.readyState == 'loaded' || script.readyState == 'complete' ){
                script.onreadystatechange = null;
                fn();
            }
        };
    }else{ //其他浏览器
        script.onload = function(){
            fn();
        };
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}
var lodashUrl = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js";//待加载文件的地址信息
//调用方法  
loadJS(lodashUrl,lodashLoadSuccess);
function lodashLoadSuccess(){
	//js文件加载成功之后，要执行的回调函数
}

2、利用document.write()或者document.writeln()实现

该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。

<script>
	document.writeln('\<script  src=\"js/config.js\"\>\</script\>');
</script>

其中，document.write()加载完之后不会主动换行，document.writeln()加载完成后会主动换行。