HTML5 瀏覽器返回按鈕/手機返回按鈕事件監聽

1.HTML5  History對象

支持使用pushState()方法修改地址欄地址，而不刷新頁面。

popstate事件

當history實體被改變時，popstate事件將會發生。調用pushState()方法或者replaceState()方法是觸發，當用戶點擊瀏覽器返回按鈕時也會觸發。

事件註冊實例：

window.addEventListener('popstate', function (event) {
    console.info(event);
    console.info(event.state);
    console.info(event.state.id);
});

2.根據這個事件，若是在觸發是從新添加當前頁面狀態，這樣的話用戶經過返回按鈕就沒法離開這個頁面了。

從而實現返回按鈕被鎖定的狀態

<div id="number"></div>

<script>
    pushHistory();
    var number=0;
    window.addEventListener("popstate", function (e) {
        // alert("我監聽到了瀏覽器的返回按鈕事件啦"); //根據本身的需求實現本身的功能 
        number++;
        var p=document.createElement('p');
        p.innerHTML=number;
        document.getElementById('number').appendChild(p);
        pushHistory(); //注，此處調用，能夠用戶一直停留着這個頁面
    }, false);

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

 

更多：

HTML5 History對象，Javascript修改地址欄而不刷新頁面

HTML5 History對象，Javascript修改地址欄而不刷新頁面（二）

HTML5 Geolocation API地理定位整理（二）