收藏
回答

公众号中安卓设备监听popstate失效,原因为使用history.pushState?

在项目(单页面模式)中最近安卓设备出现了回退异常现象,以前回退正常。

复现方式(下方贴出验证demo):

1、依次点击改变hashA、B、C按钮,从hashC回退到B能正常回退,继续从B回退会被关闭页面,如果回退到hashB此时随意点击一下页面或者任意的人和手机的交互后再点回退,依然能正常回退到hashA。

2、如果注释掉history.pushState(null, null, document.URL);这一行代码能正常回退,也能监听到popstate

由于程序需要阻止回退采用的这种方案,最近才出现的问题,网上各种查有类似问题但是没有实际的解决方式,有不有什么解决办法或者平替方案吗?

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


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>popstate验证</title>
    <style>


    </style>
    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->


</head>


<body>
    <script src="./vconsole.min.js"></script>
    <button onclick="changeHash()">改变hashA</button>
    <button onclick="changeHashB()">改变hashB</button>
    <button onclick="changeHashC()">改变hashC</button>
    <script>
        var vConsole = new window.VConsole();
    </script>
    <script>
        function changeHash(){
            location.hash = 'A';
        }
        function changeHashB(){
            location.hash = 'B';
        }
        function changeHashC(){
            location.hash = 'C';
        }
        window.addEventListener("popstate", function(e) {
            history.pushState(null, null, document.URL);
        }, false)
    </script>
</body>


</html>
回答关注问题邀请回答
收藏

2 个回答

  • 吃鱼只吃三道鳞
    吃鱼只吃三道鳞
    07-10

    顶,ios新款手机、android现在都不能触发

    07-10
    有用
    回复 1
    • 一
      08-22
      很多人反馈 但是就是没下文
      08-22
      回复
  • 一
    06-20

    各位大佬有解决办法吗

    06-20
    有用
    回复
登录 后发表内容