业务场景:APP列表页右上角有一个立即刷新按钮,点击立即刷新需要刷新当前页面。下面简单实现几个DEMO,在前端开发过程中,我们经常需要通过刷新当前的页面来实现某些功能,一起来了解下前端刷新页面有哪些方式呢?
效果图
目录
方法1:reload() 方法
方法2:replace() 方法
方法3:页面自动刷新
方法1:reload() 方法
reload()方法用于刷新当前文档。类似于你浏览器上的刷新页面按钮。
代码语言:javascript复制<!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>
代码语言:javascript复制
方法2:replace() 方法
replace() 方法可用一个新文档取代当前文档。
代码语言:javascript复制<!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>
代码语言:javascript复制
方法3:页面自动刷新
页面自动刷新:把如下代码加入<head>区域中,其中10指每隔10秒刷新一次页面。
代码语言:javascript复制<meta http-equiv="refresh" content="10">
代码语言:javascript复制
好啦,本期内容就分享到这里,我们下期间!