使用document.referrer代替history.back(-1) 返回

本文探讨了window.history对象在浏览器会话历史中的作用,包括back()、forward()和go()方法,以及如何利用document.referrer来实现更精确的页面返回操作。当用户在多个标签页间切换时,使用history.back(-1)可能会导致意外的行为,而通过document.referrer检查并设置window.location.href可以确保正确回退到来源页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

window.history.

DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转,同时——从HTML5开始——提供了对history栈中内容的操作。

window.history.back(); 浏览器回退操作
window.history.forward(); 向前跳转
window.history.go(-1); 向后移动一个页面 (等同于调用 back()):

window.history.go(1);
向前移动一个页面, 等同于调用了 forward():

window.history.length 查看历史堆栈中页面的数量

document.referrer

Document.referrer 返回的是一个 URI, 当前页面就是从这个 URI 所代表的页面 跳转或打开的.

如果用户直接打开了这个页面(不是通过页面跳转,而是通过地址栏或者书签等打开的),则该属性为空字符串。由于该属性只是返回一个字符串,所以不能够通过该属性引用页面的 DOM。
在中,Document.referrer 会初始化为父窗口Window.location的href。

返回操作的问题整理

在很多时候会使用history.back(-1)作为页面的返回操作实现,这个使用上是没有问题,每次回退到上一个操作历史,但是如果当用户进行了上图的操作,同时打开多个标签或者页面,此时用户点击之前打开的标签并点击返回按钮,执行history.back(-1),那么此时执行回退操作的不会是当前的页面而是最后打开的标签页面,当前页面会出现无反应的状态,这个在实际使用中一定要特别注意,针对该问题,可以使用document.referrer代替浏览器历史的返回操作,而是获取当前页面的跳转前地址,通过   window.location.href = document.referrer;来进行当前页面的回退操作

/**
 *
 * 页面返回
 */
function  goBack() {
    if(document.referrer.length > 0){
        window.location.href = document.referrer;
    }
    else{
        history.back(-1)
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZWZhangYu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值