不刷新网页就能链接新的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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
php技巧小结【推荐】
2017/01/19 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
原生javascript实现连连看游戏
2019/01/03 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
作风建设年度心得体会
2014/10/29 职场文书