码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-11-25 18:28:54      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:整理   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 浏览器返回按钮/手机返回按钮事件监听

标签:整理   try   creat   nbsp   实现   ++   监听   script   blog   

原文地址:http://www.cnblogs.com/tianma3798/p/7895775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!