前端工程师必须知道的用 javaScript 刷新当前页面的 3 种方法

孙叫兽

关注

发布于: 2021 年 02 月 09 日

业务场景：APP 列表页右上角有一个立即刷新按钮，点击立即刷新需要刷新当前页面。下面简单实现几个 DEMO

效果图

方法1：reload() 方法

方法2：replace() 方法

方法3：页面自动刷新

方法 1：reload() 方法

reload()方法用于刷新当前文档。类似于你浏览器上的刷新页面按钮。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>孙叫兽的博客</title><script>function reloadPage(){  location.reload()}</script></head><body> <input type="button" value="重新加载页面" onclick="reloadPage()"> </body></html>

复制代码

方法 2：replace() 方法

replace() 方法可用一个新文档取代当前文档。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>孙叫兽的博客</title><script>function replaceDoc(){    window.location.replace("https://sunmenglei.blog.csdn.net/")}</script></head><body> <input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()"> </body></html>

复制代码

方法 3：页面自动刷新

页面自动刷新：把如下代码加入<head>区域中，其中 10 指每隔 10 秒刷新一次页面。

<meta http-equiv="refresh" content="10">

复制代码

好啦，本期内容就分享到这里，我们下期间！

发布于: 2021 年 02 月 09 日阅读数: 17

原文链接:【http://xie.infoq.cn/article/fea280a2eebc3cd4c9bfe2424】。未经作者许可，禁止转载。

孙叫兽

关注

前端全栈工程师，java工程师 2019.07.22 加入

csdn博客专家：孙叫兽，多年的开发经验，开发过APP,小程序，网站及系统，以前从事java相关系统研发，目前从事保险，证券，金融相关的前端全栈开发工作，微信搜：电商程序员.QQ交流群：426360778

发布

暂无评论

创作场景

前端工程师必须知道的用 javaScript 刷新当前页面的 3 种方法

方法 1：reload() 方法

方法 2：replace() 方法

方法 3：页面自动刷新

孙叫兽

评论