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


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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
JS实现self的resend
Jul 22 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
用JS实现的一个include函数
2007/07/21 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
JS如何监听div的resize事件详解
2020/12/03 Javascript
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python中的colorlog库使用详解
2019/07/05 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
南京某公司笔试题
2013/01/27 面试题
理想点亮人生演讲稿
2014/05/21 职场文书
法人授权委托书范本
2014/09/17 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
民事起诉书范本
2015/05/19 职场文书
股权投资协议书
2016/03/23 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android