Shellway的博客

如何监听微信浏览器的返回和关闭事件?

微信中的浏览器其实就是手机App中的webview,近期新版本中对HTML5和CSS3的支持率也大幅提高。这极大的提高了微信网页开发者的开发效率。

我最近在做某项目的支付页面时,业务需求要求支付页面点返回和关闭的时候,调用API触发余额和优惠券解锁。

因为微信中不好直接监控返回或关闭按钮事件,只能一顿百度。之后综合各方观点,总结了以下方法来实现。

1、返回事件监听:使用 pushState 给webview添加历史记录,然后监听webview的 popstate 事件,从而监听到返回事件。

2、关闭事件监听:微信中关闭按钮会关闭webview,触发 visibilitychange 事件,所以我们就监听webview的 visibilitychange 事件好了。

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 添加历史记录,页面无刷新
function pushHistory() {
var state = {
title: "订单支付",
url: "#"
};
//pushState有三个参数:要插入的state对象,标题和url;state对象的url要跟第三个参数url对应。
window.history.pushState(state, "订单支付", "#");
}
// 解锁钱包
function unlockwallet () {
// Do something to unlock wallet;
...
}
// 页面DOM加载完毕
window.addEventListener("DOMContentLoaded", function(e) {
pushHistory(); // 添加历史记录
// 用户点了返回按钮,监听popstate事件
window.addEventListener("popstate", function(e) {
unlockwallet(); // 钱包解锁方法
setTimeout(function () {
window.history.go(-1); // 用js再返回一下,这次真返回了
}, 500); // 至于要不要延时,根据实际来决定
}, false);
// webview被关闭了,触发了visibilitychange事件
window.addEventListener('visibilitychange', unlockwallet);
});

以上代码我在安卓微信中是没问题的,不知道IOS中什么情况,改天测试一下。

原作者:Shellway Ho,链接:http://shellway.cn