浏览器窗口有一个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. 有关Redis的Add和Set方法的比较

    测试发现,如果key已经存在,则调用Redis.Add(key, value)则不能添加或修改此key的内容value: 这样的话,我们在添加一个key和value的时候,不得不判断一次Contain ...

  2. 笔记:MyBatis Mapper XML文件详解 - Cache

    缓存(Cache) 从数据库中加载的数据缓存到内存中,是很多应用程序为了提高性能而采取的一贯做法.MyBatis对通过映射的SELECT语句加载的查询结果提供了内建的缓存支持.默认情况下,启用一级缓存 ...

  3. 【Python】 docker-py 用Python调用Docker接口

    [docker-py] 官方文档:[https://docker-py.readthedocs.io/en/stable/images.html] 众所周知,Docker向外界提供了一个API来管理其 ...

  4. 【BootStrap】 概述 & CSS

    BootStrap BootStrap由Twitter开发,基于HTML,CSS,JS,是一套前端框架.它的特点是对浏览器良好的支持(目前市面上所有流行浏览器都可以),兼容移动设备,以及响应式设计(响 ...

  5. 【Python】 文件和操作文件方法

    文件 ■ 基本的文件用法 f = open("path","mode") mode有a,w,r,b,+等.默认为r.模式与打开文件时的动作有关系,比如用w打开的 ...

  6. KVM之七:KVM克隆

    1.在克隆虚拟机之前,必须先暂停或者停掉kvm 虚拟机.以虚拟机 snale 为例,先暂停虚拟机,如下 [root@kvm ~ ::]#virsh list Id 名称 状态 ------------ ...

  7. Tomcat服务器的常用配置

    1.如何修改端口号, tomcat启动后经常会报端口冲突, 怎么办 如果部署在Linux环境下面, 首先使用netstat -apn命令检查是否是真的端口已经被占用了 如果真的被占用,进入tomcat ...

  8. Alpha冲刺No.3

    冲刺Day3 一.站立式会议 终于我们遇到了我们最艰难的时候,组员也反映每天做的事情越来越少,出现了问题越来越多. 人太少,时间太少,我们没有办法一个人花足够多的时间去钻研统一个问题,或许是所以组员的 ...

  9. 项目Alpha冲刺Day2

    一.会议照片 二.项目进展 1.今日安排 初步搭建后台框架,根据昨天的最终设计再修改原型,成功使用powerDesigner导出sql. 2.问题困难 使用了比较多的框架,而且是首次尝试纯java配置 ...

  10. 1013团队Beta冲刺day3

    项目进展 李明皇 今天解决的进度 完善了程序的运行逻辑(消息提示框等) 明天安排 前后端联动调试 林翔 今天解决的进度 向微信官方申请登录验证session以维护登录态 明天安排 继续完成维护登录态 ...