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

秒速五厘米 2022-07-28 06:21 277阅读 0赞

在使用微信Weui开发网页时，监听手机上的物理返回键。当按下返回键时：提示你是否退出。确定---》退出。   取消---》还在原页面。微信没有提供这样的接口，按下返回键，默认会触发window.history.back()方法，回到上一个页面。我们可以使用pushState()方法想history中加入URL连接，并且让窗体监听popstate事件,从而检测到从history中弹出URL链接。思路：	1.在页面加载时，使用pushstate()方法想history中添加一个空连接	2.让页面监听popstate事件，在方法中，弹出一个对话框，如果确定的话，就返回上一页，如果取消，就添加一个空连接，（注意，但你按下返回键时，那个空连接就弹出了）
 代码如下：

</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","\#");  
\};