js模拟网页的回退回退

在混合项目开发中,需要实现H5页面的自定义回退功能。当无法回退时,关闭H5并返回App。通过分析发现,history.length在回退时不减小,因此采用sessionStorage来实现这一需求。在从App跳转到A,再从A到B后,B回退到A,A回退则关闭页面,返回App。关键在于记录浏览历史,并在回退时删除当前页面的记录,避免重复触发。源码如下。

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

        在开发混合项目的过程有个需求是h5自定义页面的回退功能,等到无法回退的时候,直接关闭h5网页直接返回app界面。查找了很多资料都说无法实现,要不就是检测history.length来判断,但是我实际操作发现,回退的时候history.length并不会自动减少。最后自己分析了下回退的模式,使用sessionStorage实现的。大致如下:


        我从app跳转到a页面,在从a页面跳转到b页面,然后b点击回退a,在从a点击回退,这时候直接关闭a页面,回退到app。分析得到

        1、当我跳转浏览不同页面的时候就会记录一个浏览历史地址

        2、当我在从当前b页面点击回退的a页面的时候,我从浏览历史地址中把这个记录移除掉,为了防止多次点击触发删除历史记录,我们需要做个处理,将当前页面地址和浏览的历史地址最后一个记录匹配,成功了才可以进行回退


        演示效果如下:【备注:浏览器演示,回退到不能回退了,我直接关闭网页】


        下面是源码:

(function(win){
	var TabBarPlug=function(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值