微信浏览器左上角返回按钮监听的实现

问题描述1：

微信开发的时候，在公众号菜单中打开一个H5页面(如：个人中心)，在这个页面上的一些操作，经过多次跳转后，点击左上角的返回按钮，发现会原封不动的返回至上一级页面。

即 公众号菜单->A->B->C，点击返回后，返回了B(且无刷新)，目的是要在C直接跳转至A(公众号菜单->A->B->C，C->A)，虽然可以在C上添加按钮之类的操作进行跳转(公众号菜单->A->B->C->A)，但当点击左上角返回按钮后，依然是会返回C页面，并且，也无法确保用户不去点击左上角的返回按钮。

解决方式：

在C页面中添加如下javascript代码：

$(function(){
 pushHistory(); 

 window.addEventListener("popstate", function(e) { //回调函数中实现需要的功能
  alert("我监听到了浏览器的返回按钮事件啦");
  location.href='你要跳转的链接'; //在这里指定其返回的地址
 }, false);
});
function pushHistory() {
 var state = {
  title: "title",
  url: "__SELF__"
 };
 window.history.pushState(state, state.title, state.url);
}

问题描述2：

以上，解决了返回按钮的监听与控制，但是又出现了新的问题，即当从C->A后，点击返回按钮，依然会返回C页面，目的是在A页面点击返回则关闭网页返回至公众号对话页面。

解决方式：

PS：评论区中有人（@一路博客博主）指出新版微信jdk的关闭页面api已经改变，已在代码中标出
本人未亲自测试，各位可以两种方法都试试。

在A页面中添加如下javascript代码：

$(function(){
 pushHistory();

 window.addEventListener("popstate", function(e) {
 // 新版中使用wx.closeWindow()方法
  WeixinJSBridge.call('closeWindow');
 }, false);
});

function pushHistory() {
 var state = {
  title: "myCenter",
  url: "__SELF__"
 };
 window.history.pushState(state, state.title, state.url);
}

问题描述3：

在微信中进入页面就触发了popstate事件。然后页面会处于一直刷新状态。

解决方式：

定义boolean 变量bool=false。在页面加载后，采用setTimeout方法设置1.5s的超时，在超时执行方法中设置bool=true。

在popstate监听当中增加对bool的判断，当bool=true时，执行内容。
代码如下：

$(function(){
 pushHistory();
 var bool=false;
 setTimeout(function(){
  bool=true;
 },1500);
 window.addEventListener("popstate", function(e) {
  if(bool){
   alert("我监听到了浏览器的返回按钮事件啦");
  }
 }, false);
});

到此这篇关于微信浏览器左上角返回按钮监听的实现的文章就介绍到这了,更多相关微信浏览器返回按钮监听内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript 监控微信浏览器且自带返回按钮时间

    比如现在有一个操作 是 A->B->C->B 在B页面的返回键 第一次返回的是C 如果想直接返回A或者其他地方 则需要触发返回事件 pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 window.location = 'http://www.baidu.com'; }, false

  • vue实现微信浏览器左上角返回按钮拦截功能

    [需求] 在微信公众号开发中,有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑,而并不是让页面直接返回上一页,之前在这个细节点上的一直实现得不是很好.但看到京东购物公众号上的效果却实现得非常好,所以自己也开始了这方面的尝试.京东的效果如下图: 从上图京东购物效果上来看,在点击搜索拉起一个搜索界面,然后点击左上角反回,只是将搜索界面收起,而页面没有重新像读取进度条一样去返回,而我页面需要的正是这样的效果,下面就用vue来做一个这个过程的 demo 吧. [前提] 微信左上角的返回按钮其实无

  • 微信浏览器左上角返回按钮监听的实现

    问题描述1: 微信开发的时候,在公众号菜单中打开一个H5页面(如:个人中心),在这个页面上的一些操作,经过多次跳转后,点击左上角的返回按钮,发现会原封不动的返回至上一级页面. 即 公众号菜单->A->B->C,点击返回后,返回了B(且无刷新),目的是要在C直接跳转至A(公众号菜单->A->B->C,C->A),虽然可以在C上添加按钮之类的操作进行跳转(公众号菜单->A->B->C->A),但当点击左上角返回按钮后,依然是会返回C页面,并且,

  • 关于uniapp微信小程序左上角返回按钮的监听详解

    关于uniapp微信小程序左上角返回按钮的监听详解

    目录 项目场景: 问题描述: 原因分析: 解决方案一: 解决方案二: 结语 项目场景: uni-app 开发微信小程序,界面中点击左上角的返回按钮或者是系统自带的虚拟返回操作,返回前监听用户是否在页面内进行了相应操作,如果有则进行提示(提示用户是否确定要返回),如果没有则直接返回. 问题描述: uni-app 页面生命周期中有 onBackPress ,不过不支持微信小程序.翻看微信小程序官方文档,并未发现可以监听到左上角返回按钮的事件.查阅相关技术文档,确认微信小程序现阶段并没有提供监听左上角

  • vue监听浏览器原生返回按钮,进行路由转跳操作

    今天测试给我报了个bug说点击浏览器返回页数据显示的不对,我查了半天原因:需要监听浏览器的回退按钮,并阻止其默认事件. 具体操作方法如下: 1.挂载完成后,判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.canc

  • 微信小程序实现页面监听自定义组件的触发事件

    微信小程序实现页面监听自定义组件的触发事件,供大家参考,具体内容如下 需求:在微信小程序开发过程中,页面通常会用到提示弹框.这时为了减少代码量及代码可拓展性,我们自定义一个提示组件是必不可少的了.那么问题来了,页面如何监听到组件的触发事件呢? 下面给大家详细讲解页面如何监听自定义组件的触发事件. prompt组件: 1.首先搭建提示组件ui.由于后面各个页面都有可能用到该组件,所以我选择从页面传值过来显示提示语: 2.然后在prompt.js的点击事件里指定方法名称,该方法名称在后面的页面调用监

  • python利用wx实现界面按钮和按钮监听和字体改变的方法

    wxPython是Python语言的一套优秀的GUI图形库.允许Python程序员很方便的创建完整的.功能键全的GUI用户界面. wxPython是作为优秀的跨平台GUI库wxWidgets的Python封装和Python模块的方式提供给用户的. 只要介绍了如何利用wxPython实现吗按钮和对按钮的监听,并且改变了按钮的字体和颜色. python代码如下: #-*- coding:utf-8 -*- import wx class Frame(wx.Frame): def __init__(s

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • android studio按钮监听的5种方法实例详解

    1.匿名内部类 public class MainActivity extends AppCompatActivity implements View.OnClickListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button btn1 = fin

  • 微信小程序实现watch监听

    Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其实就是嫌麻烦...). 小程序实现 类似vue 一样的watch 监听数据 将方法注册到app.js 中也可以使用高级一点的写法 使用装饰器模式将小程序page 重写挂在到生命周期函数上或者挂在页面this 上每次就不需要重新在调用初始化一次.本文对装饰器模式不做介绍这是个思路.等待下次实现 set

  • 微信小程序全局变量改变监听的实现方法

    问题来源 最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面. 需求为:点击最后一个组件页面中的一个view,需要显示最外层父页面中的一个弹出层,并且动态的展示值,这个值的来源就是最后一个组件页面中的内容. 处理办法 当时想到的就是使用全局变量,在 app.js 中定义好全局变量,点击组件页面时就修改全局变量的值,父页面同样使用全局变量的值,这样一来就可以动态打开/关闭弹出层且传递值了. 下面先看看 app.js 中怎么定义的: glob

随机推荐