不刷新网页就能链接新的js文件方法总结


Posted in Javascript onMarch 01, 2020

如何不刷新网页就能链接新的js文件,其实在HTML语言中已经有相关的函数了,就是再添加一个<script 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文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 #Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 #Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 #Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 #Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 #Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 #Javascript
JsonServer安装及启动过程图解
Feb 28 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
利用Python如何生成便签图片详解
2018/07/09 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
办公室日常管理制度
2015/08/04 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏