不刷新网页就能链接新的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 异常处理使用总结
Jun 21 Javascript
JS类的封装及实现代码
Dec 02 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
js实现指定时间倒计时效果
Aug 26 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 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
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
Node.js实现数据推送
2016/04/14 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
Python如何调用外部系统命令
2019/08/07 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Python matplotlib可视化实例解析
2020/06/01 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
商务专员岗位职责
2013/11/23 职场文书
致跳远、跳高运动员广播稿
2014/01/09 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
义和团口号
2014/06/17 职场文书
2015年党员承诺书
2015/01/21 职场文书
详解Python中的进程和线程
2021/06/23 Python
JavaScript流程控制(分支)
2021/12/06 Javascript
Mysql 一主多从的部署
2022/05/20 MySQL