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

標籤：整理   try   creat   nbsp   實現   ++   監聽   script   blog   

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地理定位整理（二）

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