(微信公众号)页面重定向之后的回退问题

简单介绍 window 的两个常用 api

  • window.document.location.replace
  • window.document.location.href

通常如果我们需要跳转页面,如果没有使用 vue-router 等路由的话,我们都会选择 location.href = xxx 直接对页面进行替换。对于pc端页面也不会有什么问题,除了登录页面的回退。

不可否认的是,很多页面对于登录之后的跳转页面做的比较随意,用户如果一直点回退,登录态就丢了,虽然可以引导用户不要一直回退,或者直接忽略这个小问题,也不是什么太严重的bug,但总体来说用户体验是不好的。

window.location.replace(url); 用新文档替换当前文档

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

    window.history.go(-2);  //后退两页   
    window.history.go(-1);  //后退一页   
    window.history.go(1);   //前进一页
    window.history.go(2);   //前进两页

    window.history.back();//后退一页
    window.history.forward();//前进一页

原本所有的使用 location.href = xxx 来跳转页面的地方,全都换成 window.location.replace(url) 之后你会发现,pc浏览器的回退是灰色的,也就是不能回退啦! 同样的,如果是微信公众号里的h5页面,使用replace 这个 api 之后,点击返回也会直接关闭页面。 bingo~

你可能感兴趣的:(前端)