不刷新网页就能链接新的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 相关文章推荐
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
node.js中 stream使用教程
Aug 28 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
JavaScript实现原型封装轮播图
Dec 27 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP导入导出Excel代码
2015/07/07 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python Mysql自动备份脚本
2008/07/14 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python正则中最短匹配实现代码
2018/01/16 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Python类成员继承重写的实现
2020/09/16 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
班长竞选演讲稿
2014/04/24 职场文书
2016寒假假期总结
2015/10/10 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书