不刷新网页动态加载新JS文件的方法总结

作者：竹影时间：2026-10-23 16:04:15浏览：188

本文介绍如何在无需刷新网页的情况下动态加载新的JavaScript文件。通过创建script元素并添加到DOM，可实现代码热更新。对于缓存问题，可通过添加时间戳强制浏览器重新加载，确保获取最新代码逻辑。

动态加载JS文件的基本原理

要在不刷新网页的前提下链接新的JS文件，HTML语言本身已提供相关机制，即通过动态添加一个包含src属性的script标签来实现。

核心方法非常简洁，主要涉及调用document.body.appendChild(script)这一语句，将新创建的脚本元素追加到页面主体中。

具体使用步骤如下所示：


<!DOCTYPE html><html><head><meta charset="utf-8">
<script language="javascript" >
function myFunction(){ <br>var script = document.createElement("script"); <br>script.src = "cs.js";  <br>document.body.appendChild(script); <br>var t=setTimeout("demo()",10);//这是一个延迟执行函数，以便在新JS添加后再执行新JS里的函数。   }
</script>
</head><body>
<input type="button" onclick="myFunction()" value="显示警告框" />
</body></html>

假设存在一个名为cs.js的外部脚本文件。


function demo(){
  alert("你好");
}

实际操作中，可以在网页加载完成后，修改cs.js文件内的提示信息（例如将“你好”改为其他内容），然后点击页面上的“显示警示框”按钮。此时弹出的对话框将显示修改后的内容，而非原始的“你好”，以此验证新脚本已生效。

以下是该技术的扩展实例：

处理浏览器缓存的刷新方案


// 获得要刷新的script
var script = document.getElementById('jQuery');
 
// 刷新JS的方法
function refreshJS(script) {
  var newScript = document.createElement('script');
   
  // 直接加载原地址不会刷新，因为浏览器会缓存， 所以尾部加上时间戳，导致浏览器会认为这是个新地址
  newScript.src = script.src + '?' + new Date().getTime();
  document.body.removeChild(script);
  document.body.appendChild(newScript);
}
 
// 调用
refreshJS(script);

至此，关于不刷新网页即可链接新JS文件的方法总结完毕。如需了解更多相关内容，可搜索本站往期文章或继续浏览后续介绍，感谢大家的支持。

作者最新文章

JS怎么使用classList添加、删除和切换class

2026-11-05 17:26:02

网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作

2026-11-05 12:51:22

JS解析URL参数时怎么处理中文乱码和特殊字符

2026-11-05 12:47:23

js-cookie 存储 JSON 对象：自动序列化与反序列化技巧

2026-11-05 12:36:26

marked.js 快速上手：安装与基础 Markdown 转 HTML 示例

2026-11-05 09:32:53