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


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 相关文章推荐
使用jquery实现简单的ajax
Jul 08 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
js querySelector() 使用方法
Dec 21 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP中file_get_contents高?用法实例
2014/09/24 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python如何判断数独是否合法
2016/09/08 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python中wheel的用法整理
2020/06/15 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Golang 编译成DLL文件的操作
2021/05/06 Golang
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python