详解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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
在layui中select更改后生效的方法
2019/09/05 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
为什么要有struct关键字
2012/05/08 面试题
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
现场施工员岗位职责
2015/04/11 职场文书
投资合作意向书范本
2015/05/08 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers