视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2020-11-27 15:13:00 责编:小采
文档

在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的

需求,那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢。

我相信很多朋友像我一样,在百度、搜狗里面搜索很久都没找到方法。下面就来告诉大家怎样监听的方法:

首先我们要了解浏览器的history。大家知道在页面中我们可以使用JavaScript window history,后退到前面页面,但是由于安全原因javascript不允许修改

history里已有的url链接,但可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件

监测,那么我们就可以进行监听。

返回、后退、上一页按钮点击监听实现代码:

window.addEventListener("popstate", function(e) { 
 alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
 }, false);

虽然我们监听到了后退事件,但是页面还是会返回上一个页面,所以我们需要使用pushState增加一个本页的url,代表本页,大家都非常清楚是#

function pushHistory() { 
 var state = { 
 title: "title", 
 url: "#" 
 }; 
 window.history.pushState(state, "title", "#"); 
 }

当进入该页面,我们就给这个history压入一个本地的连接。当点击返回、后退及上一页的操作时,就进行监听,在监听代码中实现自己操作。

下面是完整的代码:

$(function(){ 
 pushHistory(); 
 window.addEventListener("popstate", function(e) { 
 alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
}, false); 
 function pushHistory() { 
 var state = { 
 title: "title", 
 url: "#" 
 }; 
 window.history.pushState(state, "title", "#"); 
 } 
 
});

注:部分代码参考网上!

后续问题收集:

1.在微信中进入页面就触发了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("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
 } 
 pushHistory(); 
 
 }, false); 
 });

下载本文
显示全文
专题