不刷新网页就能链接新的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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
jQuery中库的引用方法
Jan 06 jQuery
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
JS中如何优雅的使用async await详解
Oct 05 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去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python tkinter和exe打包的方法
2020/02/05 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
工商管理应届生求职信
2013/10/07 职场文书
仓库主管的岗位职责
2013/12/04 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
安全教育主题班会教案
2015/08/12 职场文书