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

来源:互联网 发布:怪狗软件软件有限公司 编辑:程序博客网 时间:2024/06/15 16:14

<p>在使用微信Weui开发网页时,监听手机上的物理返回键。<strong><span style="color: rgb(255, 0, 0);">当按下返回键时</span></strong>:提示你是否退出。<strong><span style="font-size: 18px;">确定---》退出</span></strong>。   <strong><span style="font-size: 18px;">取消---》还在原页面。</span></strong></p><p>微信没有提供这样的接口,按下<strong><span style="color: rgb(255, 0, 0);">返回键</span></strong>,<strong><span style="font-size: 18px;">默认</span></strong>会触发<strong><span style="font-size: 18px;">window.history.back()</span></strong>方法,回到上一个页面。</p><p>我们可以使用pushState()方法想history中加入URL连接,并且让窗体监听popstate事件,从而检测到从history中弹出URL链接。</p><p>思路:</p><p><span style="white-space: pre;"></span>1.在页面加载时,使用pushstate()方法想history中添加一个空连接</p><p><span style="white-space: pre;"></span>2.让页面监听popstate事件,在方法中,弹出一个对话框,如果确定的话,就返回上一页,如果取消,就添加一个空连接,(注意,但你按下返回键时,那个空连接就弹出了)</p><p></p><p>代码如下:</p>
</pre><pre code_snippet_id="1630727" snippet_file_name="blog_20160331_3_134785" name="code" class="javascript">
$(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","#");
};


0 0
原创粉丝点击