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


Posted in Javascript onMarch 04, 2020

问题描述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); 
});

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

Javascript 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
详解Js模块化的作用原理和方案
Apr 29 Javascript
js回调函数原理与用法案例分析
Mar 04 #Javascript
在pycharm中开发vue的方法步骤
Mar 04 #Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 #Javascript
vuex入门最详细整理
Mar 04 #Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 #Javascript
vue 自定义组件的写法与用法详解
Mar 04 #Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 #Javascript
You might like
PHP VS ASP
2006/10/09 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
文秘专业个人求职信
2013/12/22 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
物业管理工作方案
2014/05/10 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
小学家长通知书评语
2014/12/31 职场文书
2015入党自传格式范文
2015/06/26 职场文书
春季运动会加油词
2015/07/18 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
Mysql排序的特性详情
2021/11/01 MySQL