动态加载JavaScript文件的三种实现方式

作者:代码拾荒

时间:2026-10-22

浏览:295

本文介绍了动态加载JavaScript文件的三种常用方法。第一种利用document.write重写文档流,但会导致页面重绘;第二种通过jQuery的getScript方法实现;第三种基于原生JavaScript动态创建script标签并设置src属性,同时兼容不同浏览器的加载状态监听。

文章目录

本文整理了几种动态加载JavaScript文件的常见方案,并将持续更新补充。

使用document.write方式

一、使用document.write/writeln()方式

该方法通过重写文档流来实现JS文件的动态加载,其副作用是导致整个页面发生重绘。

具体实现如下:

代码示例:

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

使用时需注意特殊字符的正确转义。

使用jQuery加载

二、使用jQuery

利用jQuery提供的getScript(url, callback)方法来完成JS文件的动态加载。


$.getScript('test.js',function(){
 alert('done');
});

原生JavaScript实现

三、使用原生JavaScript方法

核心原理是动态创建一个script标签,并为其指定src属性以指向目标脚本。


function loadJs(url,callback){
 var script=document.createElement('script');
 script.type="text/javascript";
 if(typeof(callback)!="undefined"){
 if(script.readyState){
 script.onreadystatechange=function(){
  if(script.readyState == "loaded" || script.readyState == "complete"){
  script.onreadystatechange=null;
  callback();
  }
 }
 }else{
 script.onload=function(){
  callback();
 }
 }
 }
 script.src=url;
 document.body.appendChild(script);
 }
 loadJs("test.js",function(){
 alert('done');
 });

基于相同原理,也可动态加载CSS文件,区别在于将脚本插入到head标签而非body中。

以上即为动态加载JavaScript文件的几种主要方法,希望能对您的学习有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章