微信公众号开发之返回按钮事件监听

最新推荐文章于 2025-05-28 18:01:19 发布

原创最新推荐文章于 2025-05-28 18:01:19 发布 · 1.1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信开发 #返回按钮事件 #微信返回监听

笔记本专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在微信内置浏览器中使用JavaScript控制JSP页面的返回行为，避免默认返回机制导致用户体验不佳的问题，并通过监听popstate事件实现指定页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.微信公众号交互页面嵌入了JSP页面，微信内置的浏览器左上角有返回按钮，而安卓版没有，在实际项目中，有页面跳转A-->B-->C，C页面做完处理点击返回直接跳到A页面的需求，默认的返回是不可以的，处理逻辑如下：

$(function(){

    pushHistory(); 
    window.addEventListener("popstate", function(e) {  //回调函数中实现需要的功能
	// alert("我监听到了浏览器的返回按钮事件啦");
	window.location.href='/wechart/contractList?userId=${userId}&openId=';  //在这里指定其返回的地址
    }, false);

});

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

}

2.为了避免C页面跳回A页面后，再点击返回又回到C页面，我们可以再在A页面中监听下返回按钮，如果点击返回就关闭页面

$(function(){

    pushHistory(); 
    window.addEventListener("popstate", function(e) {  //回调函数中实现需要的功能
	// alert("我监听到了浏览器的返回按钮事件啦");
	WeixinJSBridge.call('closeWindow');
    }, false);