微信公众号开发时,按物理返回键时,提示是否退出对话框

在使用微信Weui开发网页时,监听手机上的物理返回键。当按下返回键时:提示你是否退出。确定---》退出。   取消---》还在原页面。

微信没有提供这样的接口,按下返回键默认会触发window.history.back()方法,回到上一个页面。

我们可以使用pushState()方法想history中加入URL连接,并且让窗体监听popstate事件,从而检测到从history中弹出URL链接。

思路:

1.在页面加载时,使用pushstate()方法想history中添加一个空连接

2.让页面监听popstate事件,在方法中,弹出一个对话框,如果确定的话,就返回上一页,如果取消,就添加一个空连接,(注意,但你按下返回键时,那个空连接就弹出了)

代码如下:

$(document).ready(function(){ 
  
//在页面初始化时,加入一个空连接
pushHistory();
});


//让窗口监听popstate事件
setTimeout(function(){
window.addEventListener("popstate",function(e){
//方法一:
//这里使用jqueryweui.js
$.confirm("你确认要退出吗",function(){
//单击确定触发
window.history.back();
},function(){
//取消是触发,添加一个空连接
pushHistory();
});
//方法二:
//如果是单独的js
var i=confirm("你确认要退出吗");
if(i){
window.history.back();
}else{
pushHistory();
}
});
},300);


//在history加入空连接
function pushHistory(){
var state={title:"title",url:"#"};
window.history.pushState(state,"title","#");
};
 
  

你可能感兴趣的:(微信)