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


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 相关文章推荐
Js 中debug方式
Feb 07 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
Vue自定义toast组件的实例代码
Aug 15 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
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
中国梦团日活动总结
2014/07/07 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
教师党员个人总结
2015/02/10 职场文书
2019各种承诺书范文
2019/06/24 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
如何通过一篇文章了解Python中的生成器
2022/04/02 Python