h5页面在微信浏览器页面不能返回问题处理，代码复制即用

李宏伟~

已于 2024-05-31 10:40:24 修改

阅读量170

点赞数 1

文章标签： javascript 前端 html

于 2024-05-30 19:58:03 首次发布

本文链接：https://blog.csdn.net/weixin_52901235/article/details/139333266

版权

<script>
  const swipeArea = document.getElementById('app');
  let startX = 0;
  let dist = 0;

  /**页面首次加载定义参数 loaded 防首次关闭 */
  let loaded = false;
  window.onload = function() {
      loaded = true;
  }; 

  swipeArea.addEventListener('touchstart', function(e) {
      startX = e.touches[0].clientX;
  });

  swipeArea.addEventListener('touchmove', function(e) {
      let currentX = e.touches[0].clientX;
      dist = currentX - startX;
  });

  swipeArea.addEventListener('touchend', function() {
      if (dist < -50) {
          if (typeof WeixinJSBridge !== 'undefined') {
            closeWindow()
          } else {
              alert('请在微信浏览器中使用该功能');
          }
      }
  });

   /**监听窗口的 popstate 事件*/ 
   window.onpopstate = function(event) {
    alert("触发手机自带返回")
    closeWindow()
  };
  

  window.onunload = function() {
      if (loaded) {
          alert('页面即将关闭');
          closeWindow()
          // 在这里可以执行特定的操作，例如发送请求、记录日志等
      }
  };
  function closeWindow() {
    /**小程序内嵌h5的时候会用到该方法*/
    window.parent.postMessage({ data: 'back' }, '*');
    /**执行关闭窗口操作*/
    WeixinJSBridge.invoke('closeWindow', {}, function(res) {});
  }
</script>