浏览器窗口有一个history对象，用来保存浏览历史。

如果当前窗口先后访问了三个网址，那么history对象就包括三项，history.length属性等于3。

history对象提供了一系列方法，允许在浏览历史之间移动：

window.history.back()：移动到上一个访问页面，等同于浏览器的后退键。

window.history.forward()：移动到下一个访问页面，等同于浏览器的前进键。

window.history.go(num)：接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()。

window.history.pushState()：HTML5为history对象添加了两个新方法，window.history.pushState()和window.history.replaceState()，用来在浏览历史中添加和修改记录。

注：1.如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是默默的失败。

　　2.设置时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

重点讲解下：window.history.pushState()

window.history.pushState(state, title, utl)，在页面中创建一个 history 实体。直接添加到历史记录中。

其中参数：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

注：pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。

举例实现：

Html5 监听拦截Android返回键方法如下：

1.监听 popstate 事件

window.addEventListener("popstate", function(){

    //doSomething

}, false)

2.取消默认的返回操作，即监听拦截返回键：添加一条空的 history 实体作为替代原来的 history 实体

 window.history.pushState(null, null, "#");

举例：

<!DOCTYPE html>

<html>

  <meta name="viewport" content="width=device-width">

  <script type="text/javascript">

     var count = 0 ;

     window.history.pushState(null, null, "#");

     window.addEventListener("popstate", function(e) {

        window.history.pushState(null, null, "#");

        document.getElementById('logView').innerHTML = "用户点击返回" + (++count)

     })

  </script>

<body>

  <p id="logView">test</p>

</body>

</html>

参考：https://my.oschina.net/xtdhwl/blog/1068692

Html5 监听拦截Android返回键方法详解的更多相关文章

  1. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  2. VueApp监听手机物理返回键的事件

    代码 第一步创建js文件夹子 在main里面引用   JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...

  3. mui 监听 手机 物理返回键

    mui.back = function(){ return  //禁用物理返回键  也可以写其他逻辑 }

  4. Android工程:引用另一个Android工程的方法详解

    本篇文章是对在Android中引用另一个Android工程的方法进行了详细的分析介绍.需要的朋友参考下   现在已经有了一个Android工程A.我们想扩展A的功能,但是不想在A的基础上做开发,于是新 ...

  5. 页面返回刷新或H5监听(手机的)返回键

    1. pushHistory(); window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返 ...

  6. H5新特性监听手机的返回键

    var hiddenProperty ='hidden' in document ? 'hidden' :'webkitHidden' in document ? 'webkitHidden' : ' ...

  7. JS监听手机物理返回键，返回到指定页面

    pushHistory(); window.addEventListener("popstate", function(e) { window.location = data.in ...

  8. 监听EditText变化---TextWatcher 类用法详解

    http://www.cnblogs.com/yjing0508/p/5316985.html TextWatcher textWatcher = new TextWatcher() { @Overr ...

  9. cocos2dx之WebView踩过的坑（android返回键处理问题）

    最近游戏接入了一个私服平台,由于没有sdk,所以支付相关的操作需要在网页端进行,也就是说点击充值需要在游戏内部弹出一个网页,并定位到平台充值的地址.查阅相关资料后决定使用cocos2dx自带的WebV ...

随机推荐

  1. Linux开发环境工具收集

    zsh & oh-my-zsh 配置oh-my-zsh之前要先安装Git sudo apt-get install zsh sudo apt-get install git wget http ...

  2. 网络通信 --> 同步、异步、阻塞与非阻塞介绍

    同步.异步.阻塞与非阻塞介绍 聊聊同步.异步.阻塞与非阻塞

  3. bootstrap 模态框（modal）插件使用

    今天用户登陆时,在原网页上弹出新登陆窗口,发现使用的是modal插件,记录下该插件的使用方法,手写强化下. 首先,模态框(modal)是覆盖在父窗体上的子窗体,目的是显示来自一个单独的源的内容,可以在 ...

  4. ＮＳＲＣ技术分享——自制Linux Rootkit检测工具

    ### 前言 Linux系统中存在用户态与内核态,当用户态的进程需要申请某些系统资源时便会发起系统调用.而内核态如何将系统的相关信息实时反馈给用户态呢,便是通过proc文件系统.如此便营造了一个相对隔 ...

  5. java中使用ReentrantLock锁中的Condition实现三个线程之间通信，交替输出信息

    本文直接附上源代码,如下是自己写的一个例子 面试题需求: 使用Condition来实现 三个线程 线程1 线程2 线程3 三个交替输出 [按照 线程1(main)-->线程2-->线程3] ...

  6. 【Redis使用系列】Redis常用操作

    一.string类型的常用命令 set key value   #一个key对应一个value.多次赋值,会覆盖前面. setnx key value  #如果key存在则创建key1,并返回1,如果 ...

  7. java.lang.system 类源码解读

    通过每块代码进行源码解读,并发现源码使用的技术栈,扩展视野. registerNatives 方法解读 /* register the natives via the static initializ ...

  8. Scapy实现SYN泛洪攻击

    一.实验说明 1.实验介绍 本次实验将使用python3版本的Scapy--Scapy3k来实现一个简单的DDos,本次实验分为两节,本节将学习如何使用Scapy3k来实现SYN泛洪攻击. 2.知识点 ...

  9. django restful 1-在线Python编辑器

    客户端(浏览器)----> 前端页面-----> 后端处理数据,并把数据以 json 形式发送到前端 online_app.py from django.conf import setti ...

  10. js 选择图片生成base64数据

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...