不刷新网页就能链接新的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学习笔记(二) js对象
Oct 25 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
python3实现单目标粒子群算法
2019/11/14 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
交通安全教育制度
2014/02/02 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
个人存款证明书
2014/10/18 职场文书
物流业务员岗位职责
2015/04/03 职场文书
初中团委工作总结
2015/08/13 职场文书
python实现会员管理系统
2022/03/18 Python