不刷新网页就能链接新的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 相关文章推荐
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
用JS实现简单的登录验证功能
Jul 28 Javascript
JS实现520 表白简单代码
May 21 Javascript
vue实现文件上传功能
Aug 13 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
Cakephp 执行主要流程
2010/03/24 PHP
PHP静态文件生成类实例
2014/11/29 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
IE与firefox之jquery用法区别
2008/10/03 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
用Python抢过年的火车票附源码
2015/12/07 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python实现停车管理系统
2018/11/30 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
亲子拓展活动方案
2014/02/20 职场文书
车间机修工岗位职责
2014/02/28 职场文书
yy生日主持词
2014/03/20 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
2016银行求职自荐信
2016/01/28 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
Java 多态分析
2022/04/26 Java/Android
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL