分享学习记录
互联网技术知识

网站实现JS后退、前进、返回上一页和刷新代码

打开网站有时候我们想要实现前进,后退,刷新等功能,我用的比较多的就是返回上一页,其实实现的原理是一样的,都是通过js代码来实现的,这个不是很难的,我们直接去别的网站都可以看到很多的这类代码。

JS后退代码

window.history.go(-1)      可简写为:   history.go(-1)
window.history.back()      可简写为:   history.back()

JS前进代码

window.history.go(1)        可简写为:   history.go(1)
window.history.forward()    可简写为:   history.forward()

JS返回上一页并刷新代码

self.location=window.document.referrer     可简写为:   self.location=document.referrer

JS刷新代码

history.go(0)
location.reload()
location=location
location.assign(location)
document.execCommand('Refresh')
window.navigate(location)
location.replace(location)
document.URL=location.href

调用实例

(1)按钮调用

<input type="button" value="后退" onclick="window.history.go(-1)" />
<input type="button" value="返回上一页" onclick="history.back()" />
<input type="button" value="前进" onclick="window.history.go(1)" />
<input type="button" value="前进" onclick="window.history.forward()" />
<input type="button" value="返回上一页并刷新" onclick="self.location=window.document.referrer;" />
<input type="button" value="刷新" onclick="window.location.reload()" />

(2)链接调用

<a href="javascript:history.go(-1);">后退</a>
<a href="javascript:" onclick="history.back()">返回上一页</a>
<a href="#" onclick="javascript:history.back();">返回上一步</a>
<a href="javascript:history.go(1);">前进</a>
<a href="#" onclick="history.forward();">前进</a>
<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>
<a href="#" onclick="location.reload();">刷新</a>

以上就是JS后退、前进、返回上一页并刷新代码的全部内容。大家按需来使用,并不是某个功能一定要用的,要看网站的功能吧。比如网站页面比较长,返回顶部这个功能还是实用的。

赞(0)
文章名称:《网站实现JS后退、前进、返回上一页和刷新代码》
文章链接:https://www.bailuze.com/17556.html
本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本站专注于百度、搜狗、360、谷歌、bing等常见搜索引擎的优化,关键词排名的提高,诚意咨询邮箱526009505@qq.com
分享到