详解Html5 监听拦截Android返回键方法


Posted in HTML / CSS onApril 18, 2018

浏览器窗口有一个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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 #HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 #HTML / CSS
canvas线条的属性详解
Mar 27 #HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 #HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 #HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 #HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 #HTML / CSS
You might like
PHP异步调用socket实现代码
2012/01/12 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
基于Jquery实现表单验证
2020/07/20 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
新闻网站实习自我鉴定
2013/09/25 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
希特勒的演讲稿
2014/05/23 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
采购员工作总结范文
2015/08/12 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书