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