不刷新网页就能链接新的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 12 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
angular2中Http请求原理与用法详解
Jan 11 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
Vue实现购物车功能
2017/04/27 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
js实现烟花特效
2020/03/02 Javascript
Python functools模块学习总结
2015/05/09 Python
《Python学习手册》学习总结
2018/01/17 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python3实现逐字输出的方法
2019/01/23 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
考试作弊检讨书
2014/10/21 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书