document.referrer 配合微信监听返回按钮优化用户体验

本文介绍了javascript中document.referrer方法,可返回并刷新页面、获取上一页面url。以商城地址列表页为例,说明添加新地址后返回刷新数据的应用。还针对按返回键体验不佳问题,给出获取上一页面地址、监听微信返回按键等解决思路及代码示例。

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

document.referrer是javascript提供的默认返回并刷新页面的方法;同时用document.referrer可以获取到上一个页面的url;

那么具体如何使用呢?

举个列子:我们在做商城的时候,会有地址列表页;如下图地址列表页,点击添加收货地址进入添加收货地址页面。当新的收货地址添加完毕后,我们要自动返回到这个页面并且刷新改页面数据;那么就可以用document.referrer方法;

当添加完新地址返回到地址列表页后,数据是刷新了。但是如果这时按返回按键,会发现又会返回到添加新地址页面。那么用户体验度是非常不好的。我们要达到的效果应该是点击返回按钮,返回到进入地址列表的那个页面;

解决方法:可以在地址列表页声明变量获取上一个页面的地址:

思路:获取收货地址页面URL上的参数,判断当前列表页是否在添加收货地址页面过来的;然后进行操作;

var url = document.referrer;//获取上一个页面的地址

var reg = RegExp(/address/);//声明一个增则表达,具体需要根据需要判断的URL去创建;

if(reg.test(str)){

//收货地址页面过来的

}else{

//正常顺序进入的;

}

//这时候需要监听微信返回按键

    pushHistory();
        function pushHistory() {
            var state = {
                title: "title",
                url: "#"    
            };
            window.history.pushState(state, "title", "#");
        };

//通过监听微信按钮实现正常返回;

if(reg.test(str)){
            window.addEventListener("popstate", function(e) {  //回调函数中实现需要的功能
               window.history.go(-2);//正常回退  //两级  第一级编辑页面 第二级别当前页面
            }, false); 
        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值