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


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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 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 清除网页病毒的方法
2008/12/05 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
python实现simhash算法实例
2014/04/25 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
简单学习Python time模块
2016/04/29 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
2014村务公开实施方案
2014/02/25 职场文书
目标责任书范本
2014/04/16 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
金秋助学感谢信
2015/01/21 职场文书
团代会开幕词
2015/01/28 职场文书
仓管员岗位职责
2015/02/03 职场文书
党员转正意见怎么写
2015/06/03 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS