广告
返回顶部
首页 > 资讯 > 前端开发 > html >如何实现不刷新网页就能链接新的js文件
  • 624
分享到

如何实现不刷新网页就能链接新的js文件

2024-04-02 19:04:59 624人浏览 薄情痞子
摘要

这篇文章给大家分享的是有关如何实现不刷新网页就能链接新的js文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。如何不刷新网页就能链接新的js文件,其实在html语言中已经有相关的

这篇文章给大家分享的是有关如何实现不刷新网页就能链接新的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文件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: 如何实现不刷新网页就能链接新的js文件

本文链接: https://www.lsjlt.com/news/76021.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何实现不刷新网页就能链接新的js文件
    这篇文章给大家分享的是有关如何实现不刷新网页就能链接新的js文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。如何不刷新网页就能链接新的js文件,其实在HTML语言中已经有相关的...
    99+
    2022-10-19
  • JavaScript如何实现上传文件时不用刷新页面
    这篇文章主要为大家展示了“JavaScript如何实现上传文件时不用刷新页面”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何实现上传文件时...
    99+
    2022-10-19
  • Android WebView如何实现网页的刷新
    Android WebView如何实现网页的刷新 一、引言 在Android应用开发中,我们经常需要将网页嵌入到应用中展示,这时就可以使用Android提供的WebView组件。而在展示网页的过程中,...
    99+
    2023-10-22
    android Android
  • Win7 32位用浏览器进行浏览网页时如何不用刷新就能看到最新的内容
    Win7 32位系统怎么让网页不用刷新就能看到最新的内容?我们日常在用浏览器进行浏览网页的时候,会发现一个问题,就是当页面有更新内容的话,我们当时是看不到的,因为缓存的原因,我们都需要重新刷新一下页面才会显示看到最新的内...
    99+
    2023-06-05
    Win7 不刷新 最新内容 浏览器 网页 内容 浏览
  • ajax如何实现无刷新上传文件功能
    这篇文章主要介绍了ajax如何实现无刷新上传文件功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<!DOCTYPE HTML><ht...
    99+
    2023-06-08
  • JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的示例分析
    这篇文章主要介绍JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!下面的JS代码是一个最基础的JS的ajax实...
    99+
    2022-10-19
  • 如何实现刷新页面后让控制台的js代码继续执行
    这篇文章主要介绍了如何实现刷新页面后让控制台的js代码继续执行,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在各种限时,秒杀活动中,有个自动...
    99+
    2022-10-19
  • pushState、replaceState、onpopstate如何实现Ajax页面的前进后退刷新功能
    这篇文章主要介绍pushState、replaceState、onpopstate如何实现Ajax页面的前进后退刷新功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!使用Ajax可以异步获取数据,可以更高效地渲染页面...
    99+
    2023-06-08
  • jQuery的ajax中如何使用FormData实现页面无刷新上传功能
    小编给大家分享一下jQuery的ajax中如何使用FormData实现页面无刷新上传功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1,先看效果图期望的功能和效果很简单:点击页面中的上传...
    99+
    2022-10-19
  • 如何利用新浪官方的短网址API接口实现T.cn短链接的压缩生成
    短网址的实现原理就是有一个数据表会配置文件将短网址和实际网址进行对应,当请求某个短网址时,程序跳转到对应的实际网址上去,从而实现网址的访问。目前国内最稳定最好用的是新浪T.cn短链接。之前新浪提供了长链接转为短链接的API,可以把长链接转为...
    99+
    2023-06-03
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作