JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法
在實(shí)際的應(yīng)用中，我們常常需要實(shí)現(xiàn)在移動app和瀏覽器中點(diǎn)擊返回、后退、上一頁等按鈕實(shí)現(xiàn)自己的關(guān)閉頁面、調(diào)整到指定頁面或執(zhí)行一些其它操作的需求，那在代碼中怎樣監(jiān)聽當(dāng)點(diǎn)擊微信、支付寶、百度糯米、百度錢包等app的返回按鈕或者瀏覽器的上一頁或后退按鈕的事件呢。
我相信很多朋友像我一樣，在百度、搜狗里面搜索很久都沒找到方法。
下面就來告訴大家怎樣監(jiān)聽的方法：
首先我們要了解瀏覽器的history。
大家知道在頁面中我們可以使用javascript window history，后退到前面頁面，但是由于安全原因javascript不允許修改history里已有的url鏈接，但可以使用pushState方法往history里增加url鏈接，并且提供popstate事件監(jiān)測從history棧里彈出url。既然有提供popstate事件監(jiān)測，那么我們就可以進(jìn)行監(jiān)聽。
返回、后退、上一頁按鈕點(diǎn)擊監(jiān)聽實(shí)現(xiàn)代碼：
window.addEventListener("popstate", function(e) {
alert("我監(jiān)聽到了瀏覽器的返回按鈕事件啦");//根據(jù)自己的需求實(shí)現(xiàn)自己的功能
}, false);
雖然我們監(jiān)聽到了后退事件，但是頁面還是會返回上一個頁面，所以我們需要使用pushState增加一個本頁的url,代表本頁，大家都非常清楚是#
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
當(dāng)進(jìn)入該頁面，我們就給這個history壓入一個本地的連接。當(dāng)點(diǎn)擊返回、后退及上一頁的操作時，就進(jìn)行監(jiān)聽，在監(jiān)聽代碼中實(shí)現(xiàn)自己操作。
下面是完整的代碼：
$(function(){
pushHistory();
window.addEventListener("popstate", function(e) {
alert("我監(jiān)聽到了瀏覽器的返回按鈕事件啦");//根據(jù)自己的需求實(shí)現(xiàn)自己的功能
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
});
以上內(nèi)容只是小編給大家列出的核心代碼，大家根據(jù)需求適當(dāng)?shù)奶砑?，修改，刪除代碼。如果大家在參考本段代碼的過程中發(fā)現(xiàn)有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要幫助大家輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
原生JS實(shí)現(xiàn)各種運(yùn)動之復(fù)合運(yùn)動
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)各種運(yùn)動之復(fù)合運(yùn)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了淺談webpack組織模塊的原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
昨天群里面的朋友問了個比較有意思的問題,keydown,keyup,keypress事件的先后順序。2009-02-02
TypeScript 中的 .d.ts 文件詳解(加強(qiáng)類型支持提升開發(fā)效率)
.d.ts 文件在 TypeScript 開發(fā)中扮演著非常重要的角色,它們讓我們能夠享受到 TypeScript 強(qiáng)大的類型系統(tǒng)帶來的優(yōu)勢,提高代碼質(zhì)量和開發(fā)效率,接下來,我們將深入探討如何為 JavaScript 庫和自定義模塊創(chuàng)建 .d.ts 文件,以及一些最佳實(shí)踐和注意事項(xiàng),一起看看吧2023-09-09
今天凌晨，微信負(fù)責(zé)人張小龍在微信朋友圈曬出了一組圖，網(wǎng)友看到紛紛“炸裂”，這到底是什么？是的，微信小程序如約上線，微信小程序怎么打開，微信小程序在哪里進(jìn)入，請閱讀本文2017-01-01
bootstrap datepicker插件默認(rèn)英文修改為中文
這篇文章主要為大家詳細(xì)介紹了bootstrap datepicker插件默認(rèn)英文修改為中文的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了javascript進(jìn)行四舍五入方法匯總，并給出了相關(guān)示例,需要的朋友可以參考下2014-12-12
今天小編就為大家分享一篇關(guān)于js中數(shù)組對象去重的兩種方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
今天在整理以前寫過的一段根據(jù)周期值自動計算下次執(zhí)行日期的js代碼，發(fā)現(xiàn)一bug,我使用parseInt對源數(shù)據(jù)串進(jìn)行轉(zhuǎn)換，當(dāng)輸入類似：2009-05-05時，parseInt將把串的05做8進(jìn)制轉(zhuǎn)換，這樣結(jié)果自然就不對了。2009-05-05