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地理定位整理(二)

posted @ 2017-11-25 17:03  天马3798  阅读(9751)  评论(0编辑  收藏  举报