HTML5 浏览器返回按钮/手机返回按钮事件监听

1.HTML5  History对象html

支持使用pushState()方法修改地址栏地址,而不刷新页面。浏览器

popstate事件app

当history实体被改变时,popstate事件将会发生。调用pushState()方法或者replaceState()方法是触发,当用户点击浏览器返回按钮时也会触发。post

事件注册实例:url

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

2.根据这个事件,若是在触发是从新添加当前页面状态,这样的话用户经过返回按钮就没法离开这个页面了。spa

从而实现返回按钮被锁定的状态code

<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>

 

更多:htm

HTML5 History对象,Javascript修改地址栏而不刷新页面对象

HTML5 History对象,Javascript修改地址栏而不刷新页面(二)blog

HTML5 Geolocation API地理定位整理(二)