脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 如何不刷新网页就能链接新的js文件

不刷新网页就能链接新的js文件方法总结

 更新时间：2020年03月01日 09:40:29   作者：独元殇の园子  
在本篇文章里小编给大家整理的是关于不刷新网页就能链接新的js文件方法总结，需要的朋友们参考下。

如何不刷新网页就能链接新的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实现点击页面任何位置返回

    这篇文章主要介绍了基于JavaScript实现点击页面任何位置返回的实例代码,需要的朋友可以参考下
    2016-08-08
  • ElementUI中Tree组件使用案例讲解

    ElementUI中Tree组件使用案例讲解

    这篇文章主要介绍了ElementUI中Tree组件使用案例讲解,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • Echarts.js无法引入问题解决方案

    Echarts.js无法引入问题解决方案

    这篇文章主要介绍了Echarts.js无法引入问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 利用iscroll4实现轮播图效果实例代码

    利用iscroll4实现轮播图效果实例代码

    iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android 这些系统上广泛使用）。下面这篇文章主要介绍了利用iscroll4实现轮播图效果的方法教程,需要的朋友可以参考下。
    2017-01-01
  • 原生js的数组除重复简单实例

    原生js的数组除重复简单实例

    下面小编就为大家带来一篇原生js的数组除重复简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript实现打印星型金字塔功能实例分析

    JavaScript实现打印星型金字塔功能实例分析

    这篇文章主要介绍了JavaScript实现打印星型金字塔功能,结合具体实例形式分析了javascript针对输出任意给定行数星型金字塔图形的原理与相关实现技巧,需要的朋友可以参考下
    2017-09-09
  • Javascript(es2016) import和require用法和区别详解

    Javascript(es2016) import和require用法和区别详解

    本篇文章主要介绍了Javascript(es2016) import和require用法和区别详解，具有一定的参考价值，有兴趣的可以了解下
    2017-08-08
  • XML文件转化成NSData对象的方法

    XML文件转化成NSData对象的方法

    这篇文章主要介绍了XML文件转化成NSData对象的方法，需要的朋友可以参考下
    2015-08-08
  • 使用bootstrapValidator插件进行动态添加表单元素并校验

    使用bootstrapValidator插件进行动态添加表单元素并校验

    动态添加表单元素，并调用bootstrapValidator的方法为表单添加校验规则，调用addField()方法实现功能。下面通过本文看下具体实现方法吧
    2016-09-09
  • 微信小程序如何调用json数据接口并解析

    微信小程序如何调用json数据接口并解析

    这篇文章主要介绍了微信小程序如何调用json数据接口并解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06

最新评论