不刷新网页就能链接新的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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
Vue header组件开发详解
Jan 26 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
Vue实现简单的跑马灯
May 25 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实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
家长给小学生的评语
2014/01/30 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
质量保证书
2015/01/17 职场文书
材料员岗位职责
2015/02/10 职场文书
董事长助理岗位职责
2015/02/11 职场文书
员工安全责任协议书
2016/03/22 职场文书
python实现局部图像放大
2021/11/17 Python