点击返回按钮只能返回某一个 明确的页面(主要是处理 ios 中 web的)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/palmer_kai/article/details/83650753

非 ios 下面的一般代码如下

pc 端或者 android webview没有问题, 但是 ios 有问题

history.pushState(null, null, document.URL);
window.onpopstate = function () {
	window.location.href = './A.html';
}

需要做的就是将如下 listenerBackHandler 对应的代码copy 进返回的页面

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>B page</title>
</head>
<!-- <body onload="myonload()" onpageshow="mypageshowcode()"> -->

<body>
  i am B page <br>
  当前页面只能返回到 A page
  <a href="./C.html">跳转到c 页面</a>
  <br>
  <ol>
    <li>popstate 一般需要当前 document 中存在两个 url(pushstate)+ 通过 back or forward 来触发</li>
    <li> chrome 中 只在当前页面back or forward 触发</li>
    <li> 微信ios 中 进入和离开当前页面都会触发 popstate 事件, 如下案例中 一般会出现 返回的时候跳过 B page</li>
  </ol>
  <script>

    var listenerBackHandler = { // 在返回首页的时候会有 1s 的bug
      param: {
        isRun: false, //防止微信返回立即执行popstate事件
      },
      listenerBack: function () {
        var state = {
          title: "title",
          url: "#"
        };
        window.history.pushState(state, "title", "#");
        window.addEventListener("popstate", function (e) {
          if (listenerBackHandler.param.isRun) {
            window.location.href = "./A.html"; //返回到主页
          }
        }, false);
      },
      //初始化返回事件
      initBack: function () {
        window.addEventListener('pageshow', function () {
          listenerBackHandler.param.isRun = false;
          setTimeout(function () { listenerBackHandler.param.isRun = true; }, 1000); //延迟1秒 防止微信返回立即执行popstate事件
          listenerBackHandler.listenerBack();
        });
      }
    };

    listenerBackHandler.initBack();
  </script>
</body>

</html>

详细代码如下连接

链接:https://pan.baidu.com/s/1qdiUzivwPKPKo19gD1cmhA
提取码:qbec

参考

https://www.jianshu.com/p/9f8e336d501c

猜你喜欢

转载自blog.csdn.net/palmer_kai/article/details/83650753