快捷導(dǎo)航

JS監(jiān)聽(tīng)微信、支付寶等移動(dòng)app及瀏覽器的返回、后退、上一頁(yè)按鈕的事件方法

更新時(shí)間：2016年08月05日 11:26:52 作者：Mr_Smile2014

這篇文章主要介紹了JS監(jiān)聽(tīng)微信、支付寶等移動(dòng)app及瀏覽器的返回、后退、上一頁(yè)按鈕的事件方法,需要的朋友可以參考下

在實(shí)際的應(yīng)用中，我們常常需要實(shí)現(xiàn)在移動(dòng)app和瀏覽器中點(diǎn)擊返回、后退、上一頁(yè)等按鈕實(shí)現(xiàn)自己的關(guān)閉頁(yè)面、調(diào)整到指定頁(yè)面或執(zhí)行一些其它操作的需求，那在代碼中怎樣監(jiān)聽(tīng)當(dāng)點(diǎn)擊微信、支付寶、百度糯米、百度錢(qián)包等app的返回按鈕或者瀏覽器的上一頁(yè)或后退按鈕的事件呢。

我相信很多朋友像我一樣，在百度、搜狗里面搜索很久都沒(méi)找到方法。

下面就來(lái)告訴大家怎樣監(jiān)聽(tīng)的方法：

首先我們要了解瀏覽器的history。

大家知道在頁(yè)面中我們可以使用javascript window history，后退到前面頁(yè)面，但是由于安全原因javascript不允許修改history里已有的url鏈接，但可以使用pushState方法往history里增加url鏈接，并且提供popstate事件監(jiān)測(cè)從history棧里彈出url。既然有提供popstate事件監(jiān)測(cè)，那么我們就可以進(jìn)行監(jiān)聽(tīng)。

返回、后退、上一頁(yè)按鈕點(diǎn)擊監(jiān)聽(tīng)實(shí)現(xiàn)代碼：

window.addEventListener("popstate", function(e) { 
alert("我監(jiān)聽(tīng)到了瀏覽器的返回按鈕事件啦");//根據(jù)自己的需求實(shí)現(xiàn)自己的功能 
}, false);

雖然我們監(jiān)聽(tīng)到了后退事件，但是頁(yè)面還是會(huì)返回上一個(gè)頁(yè)面，所以我們需要使用pushState增加一個(gè)本頁(yè)的url,代表本頁(yè)，大家都非常清楚是#

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

當(dāng)進(jìn)入該頁(yè)面，我們就給這個(gè)history壓入一個(gè)本地的連接。當(dāng)點(diǎn)擊返回、后退及上一頁(yè)的操作時(shí)，就進(jìn)行監(jiān)聽(tīng)，在監(jiān)聽(tīng)代碼中實(shí)現(xiàn)自己操作。

下面是完整的代碼：

$(function(){ 
pushHistory(); 
window.addEventListener("popstate", function(e) { 
alert("我監(jiān)聽(tīng)到了瀏覽器的返回按鈕事件啦");//根據(jù)自己的需求實(shí)現(xiàn)自己的功能 
}, false); 
function pushHistory() { 
var state = { 
title: "title", 
url: "#" 
}; 
window.history.pushState(state, "title", "#"); 
} 
});

以上內(nèi)容只是小編給大家列出的核心代碼，大家根據(jù)需求適當(dāng)?shù)奶砑樱薷?，刪除代碼。如果大家在參考本段代碼的過(guò)程中發(fā)現(xiàn)有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: