1. 程式人生 > >JS監聽手機端瀏覽器的後退按鈕的事件方法

JS監聽手機端瀏覽器的後退按鈕的事件方法

轉載地址:http://www.jb51.net/article/89921.htm

 

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

大家知道在頁面中我們可以使用javascript window history,後退到前面頁面,但是由於安全原因javascript不允許修改history裡已有的url連結,但可以使用pushState方法往history裡增加url連結,並且提供popstate事件監測從history棧裡彈出url。既然有提供popstate事件監測,那麼我們就可以進行監聽。

返回、後退、上一頁按鈕點選監聽實現程式碼:

?

1

2

3

window.addEventListener("popstate", function(e) {

alert("我監聽到了瀏覽器的返回按鈕事件啦");//根據自己的需求實現自己的功能

}, false);

雖然我們監聽到了後退事件,但是頁面還是會返回上一個頁面,所以我們需要使用pushState增加一個本頁的url,代表本頁,大家都非常清楚是#

?

1

2

3

4

5

6

7

function pushHistory() {

var state = {

title: "title",

url:

"#"

};

window.history.pushState(state, "title", "#");

}

當進入該頁面,我們就給這個history壓入一個本地的連線。當點選返回、後退及上一頁的操作時,就進行監聽,在監聽程式碼中實現自己操作。

下面是完整的程式碼:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

$(function(){

pushHistory();

window.addEventListener("popstate", function(e) {

alert("我監聽到了瀏覽器的返回按鈕事件啦"

);//根據自己的需求實現自己的功能

}, false);

function pushHistory() {

var state = {

title: "title",

url: "#"

};

window.history.pushState(state, "title", "#");

}

});

 

 

PC端瀏覽器使用jquery監聽

$(document).ready(function(e) {
var counter = 0;
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
window.history.pushState('forward', null, '#');
window.history.forward(1);
window.location.href='/PF_ECP/po/kefumishu.shtml';//跳轉到個人中心
});
}
window.history.pushState('forward', null, '#'); //在IE中必須得有這兩行
window.history.forward(1);
});