移动端 H5 页面前进后退经验汇总

移动端 H5 页面前进后退经验汇总

比如现在有一个产品列表页面。 单击“添加产品”进入新页面。 填写完表单后，使用 .back() 或 .go(-1) 返回列表页面。 这时我们希望页面能够显示新添加的商品，但实际上并没有显示出来。

直接上解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
    pushHistory();
});
function pushHistory(){
    $(window).on('popstate', function(event) {
        location.reload();
    });
    var state = {
        title : '',
        url : ''
    };
    window.history.replaceState(state, '', '');
}

我将上面的代码放到一个公共模块中，然后全局调用。 对于某些页面，如果不想返回刷新，可以单独在页面上手动解绑事件。

1
2
3

$(function(){
    $(window).off('popstate');
});

可能有人会说，添加成功后，通过.href跳转到列表页面即可，这样就避免了不刷新就返回的问题。

这确实是一种解决方案，在PC端也经常这样处理。 那么为什么不推荐在移动设备上使用呢？ 其实文章开头就已经告诉了答案。 移动终端经常通过不断返回其他模块来返回到某个入口页面。 如果我通过暴力.href跳转到列表页，那么当我想退出列表页时，按返回键，会先返回新页面，然后点击返回再次返回列表页，点击返回再次退出列表页面。 。

阻止用户返回页面

例如，在购物车页面，选择部分商品，点击“购买”进入订单确认页面，点击“提交”进入支付页面。 此时，如果未付款，点击“返回”将返回订单确认页面。 但由于购物车中的商品已提交生成订单，因此返回此页面会提示类似“购物车中的商品不存在”的提示。 提示：这不利于用户体验。 点击“返回”时最好直接返回购物车页面。

简单来说，A页面跳转到B页面，B页面跳转到C页面，C页面点击返回，希望跳过B页面，直接返回A页面。

解决方法其实很简单，使用 . 跳

1

location.replace('c.html');

当B页面经过时，跳转到C页面。返回时，会跳过B页面，直接返回A页面。

ajax页面记录返回地址

此问题经常出现在选项卡导航页面，例如订单列表：

点击页面顶部的选项卡导航，会触发获取对应列表数据的ajax请求。 但由于是ajax操作，现在当我进入“待付款”导航下的订单详情页面然后返回时，可能会直接返回到“全部”导航下方。

解决办法是使用HTML5的/方法。 点击tab进行ajax操作时，执行这句：

1

history.replaceState(null, null, '?tab=1');

这时，再次点击标签导航，你会发现页面仍然进行ajax操作，但是地址栏发生了变化。 这时，进入详情页并返回，我们可以通过url获取所需的参数来控制显示哪个选项卡导航。 数据。

其实是可以用的。 如果你想记录每次切换标签导航的情况，可以使用它。 返回时，将按顺序返回。

参考