Android设备微信 history.pushState 问题 - WXOPEN Club

这个是在微信浏览器中的问题

你们的框架类型只能选择小程序或小游戏，公众号都不能选

场景1：初始直接调用 history.pushState 改变url

url 改变不生效，无法监听 popstate。
url 改变生效，无法监听 popstate。
点击按钮获取 history.state，又可以监听 popstate。

场景1：点击按钮，调用 history.pushState 改变url

url 改变，可以监听 popstate。

结论

必须事件触发 history.state 相关事件，才能监听 popstate。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pushState</title>
</head>

<body>
  <p><button id="urlBtn">获取 url</button></p>
  <p><button id="stateBtn">获取 history.state</button></p>
  <p><button id="pushStateBtn">设置 history.pushState</button></p>

  <script>
    var state0 = {
      title: '#',
      url: '#route0'
    }
    history.pushState(state0, state0.title, state0.url) //这个时候点返回正常应该不会退出页面，但是Android上退出了

    document.getElementById('urlBtn').addEventListener('click', function () {
      alert(location.href) //触发一次， route0生效，点返回不会退出页面
    }, false)

    document.getElementById('stateBtn').addEventListener('click', function () {
      alert(JSON.stringify(history.state)) //触发一次， route0生效，点返回不会退出页面
    }, false)

    document.getElementById('pushStateBtn').addEventListener('click', function () {
      var state1 = {
        title: '#',
        url: '#route1'
      }
      history.pushState(state1, state1.title, state1.url) //触发一次，route0，route1生效， 点返回不会退出页面，
    }, false)

  </script>
</body>

</html>