详解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 相关文章推荐
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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中GET变量的使用
2006/10/09 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
PHP之预定义接口详解
2015/07/29 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
AngularJS内置指令
2015/02/04 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
一篇不错的Python入门教程
2007/02/08 Python
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
便捷提取python导入包的属性方法
2018/10/15 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python 图片去噪的方法示例
2019/07/09 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
客服专员岗位职责
2014/02/28 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
色戒观后感
2015/06/12 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript