資訊專欄INFORMATION COLUMN
摘要：場(chǎng)景相信大家用安卓手機(jī)使用的過(guò)程中，會(huì)遇到這樣的一個(gè)場(chǎng)景按下手機(jī)的返回鍵時(shí)，會(huì)彈出一個(gè)詢問(wèn)框是否退出該頁(yè)面然后點(diǎn)擊了確認(rèn)鍵才真正退出。主要需求安卓手機(jī)用戶按下返回鍵不后退網(wǎng)頁(yè)。
【場(chǎng)景】
相信大家用安卓手機(jī)使用APP的過(guò)程中，會(huì)遇到這樣的一個(gè)場(chǎng)景：按下手機(jī)的返回鍵時(shí)，會(huì)彈出一個(gè)詢問(wèn)框："是否退出該頁(yè)面/APP?",然后點(diǎn)擊了確認(rèn)鍵才真正退出APP。PC端目前可以通過(guò)頁(yè)面的轉(zhuǎn)場(chǎng)實(shí)現(xiàn)。那這樣的效果在H5/微信瀏覽器/移動(dòng)端瀏覽器，能否實(shí)現(xiàn)呢？
ps:現(xiàn)在好像很少看到彈出框了，而是彈出一個(gè)toast,然后需要在有效時(shí)間內(nèi)再次點(diǎn)擊才算退出。這個(gè)功能其實(shí)應(yīng)該也可以實(shí)現(xiàn)。
【主要需求】1.安卓手機(jī)用戶按下返回鍵不后退網(wǎng)頁(yè)。彈出詢問(wèn)框
2.當(dāng)用戶點(diǎn)擊“確定”按鈕，才算后退
【思路】以上的需求，按我的理解就是一句話：“監(jiān)聽(tīng)安卓手機(jī)返回鍵”，通過(guò)百度/google，雖然發(fā)現(xiàn)此功能仍沒(méi)有很好的解決方案，但是看到了兩個(gè)與此相關(guān)的線索: history pushSate/replaceSate 和 onpopstate 。 大家也可以看看張?chǎng)涡翊笊竦奈恼拢簜魉烷T(mén)。
這兩個(gè)API的作用簡(jiǎn)單來(lái)說(shuō)就是前者可以在瀏覽器地址欄上添加/替換一條記錄，當(dāng)瀏覽器發(fā)生后退動(dòng)作時(shí)，觸發(fā)后者api.
(function(){
if(window.location.hash==""){
history.pushState(null,null,"#1")//一訪問(wèn)頁(yè)面即添加一條記錄b.html -> b.html#1
}
window.onpopstate = function(event) {//當(dāng)用戶按下返回鍵，b.html#1 -> b.html，并觸發(fā)該事件
if(confirm("確定要退出嗎")){
history.back() //執(zhí)行真正的退出
}else{
history.pushState(null,null,"#1") //用戶取消，恢復(fù) b.html -> b.html#1
}
};
}
)();
【改進(jìn)】
一切看上去很美好，看似把功能實(shí)現(xiàn)了，但是，細(xì)心的用戶就會(huì)發(fā)現(xiàn)，當(dāng)按下返回鍵，彈出詢問(wèn)框時(shí)，我們既不按確認(rèn)，也不按取消，直接再次按下返回鍵，頁(yè)面仍然跳轉(zhuǎn)。因此我們需要改進(jìn)代碼。
(function(){
if(window.location.hash==""){
history.pushState(null,null,"#1")//一訪問(wèn)頁(yè)面即添加一條記錄b.html -> b.html#1
}
window.onpopstate = function(event) {//當(dāng)用戶按下返回鍵，b.html#1 -> b.html，并觸發(fā)該事件
history.pushState(null,null,"#1")
if(confirm("確定要退出嗎")){
history.go(-2) //執(zhí)行真正的退出
}else{
//用戶取消，恢復(fù) b.html -> b.html#1
}
};
}
)();
如上，我們每次的后退，都假定用戶都按了取消鍵，這樣問(wèn)題就解決了。
測(cè)試后沒(méi)問(wèn)題。但這仍然不是完美的方案，例如在微信瀏覽器，confirm的次數(shù)一旦超過(guò)三次，就要強(qiáng)制退出，無(wú)法取消，或者通常我們開(kāi)發(fā)時(shí)都用到第三方的UI庫(kù)的彈框而不用原生的彈框.....所以下面給出了用mui的框架實(shí)現(xiàn)以上功能。
if (window.location.hash == "") {
history.pushState("change", "", "#pageone");
state = "change"
}
window.onpopstate = function (e) {
if (state == "confirm") {
history.pushState("change", "", "#pageone");
state = "change";
mui.closePopup();
return;
}
history.pushState("confirm", "", "#pageone");
state = "confirm";
mui.confirm("是否退出編輯？", "", ["否", "是"], function (e) {
if (e.index == 0) {
history.replaceState("change", "", "#pageone");
state = "change";
}
else {
history.go(-2)
}
}, "div");
}
【總結(jié)】
由于此api的兼容性極其低，因此不建議大家廣泛使用，學(xué)習(xí)交流還是可以的哈哈，針對(duì)監(jiān)聽(tīng)返回鍵，大家有更好的解決方案，也可以分享一下。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94482.html
摘要：前言如今新特性新標(biāo)簽新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對(duì)它們的支持，也是相當(dāng)給力。接下來(lái)我將和各位分享一個(gè)特別好用的新特性目前也不是特別新，輕松監(jiān)聽(tīng)任何自帶的返回鍵，包括安卓機(jī)里的物理返回鍵，從而實(shí)現(xiàn)項(xiàng)目開(kāi)發(fā)中進(jìn)一步的需求。 1、前言 如今h5新特性、新標(biāo)簽、新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對(duì)它們的支持，也是相當(dāng)給力。作為前端程序員，我覺(jué)得我們還是有必要積...
摘要：前言如今新特性新標(biāo)簽新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對(duì)它們的支持，也是相當(dāng)給力。接下來(lái)我將和各位分享一個(gè)特別好用的新特性目前也不是特別新，輕松監(jiān)聽(tīng)任何自帶的返回鍵，包括安卓機(jī)里的物理返回鍵，從而實(shí)現(xiàn)項(xiàng)目開(kāi)發(fā)中進(jìn)一步的需求。 1、前言 如今h5新特性、新標(biāo)簽、新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對(duì)它們的支持，也是相當(dāng)給力。作為前端程序員，我覺(jué)得我們還是有必要積...
摘要：原生的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。進(jìn)入正題，怎么才能解決這些問(wèn)題呢我們可以先從虛擬鍵盤(pán)入手，看看是否可以監(jiān)聽(tīng)到呼出鍵盤(pán)收回鍵盤(pán)這兩個(gè)事件。部分瀏覽器可以通過(guò)捕捉事件知道是否呼出收起虛擬鍵盤(pán)。 原生APP的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。如下圖： showImg(https://segmentfault.com/img/remote...
摘要：原生的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。進(jìn)入正題，怎么才能解決這些問(wèn)題呢我們可以先從虛擬鍵盤(pán)入手，看看是否可以監(jiān)聽(tīng)到呼出鍵盤(pán)收回鍵盤(pán)這兩個(gè)事件。部分瀏覽器可以通過(guò)捕捉事件知道是否呼出收起虛擬鍵盤(pán)。 原生APP的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。如下圖： showImg(https://segmentfault.com/img/remote...
閱讀 732·2021-11-24 10:30
閱讀 1267·2021-09-24 09:48
閱讀 3083·2021-09-24 09:47
閱讀 3602·2019-08-29 17:11
閱讀 2885·2019-08-29 15:38
閱讀 2280·2019-08-29 11:03
閱讀 3607·2019-08-26 12:15
閱讀 1018·2019-08-26 10:45
