详解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实现3D旋转书本效果
Mar 21 HTML / CSS
手把手教你用纯css3实现轮播图效果实例
May 04 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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
星际RPG字典
2020/03/04 星际争霸
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
python简单实现刷新智联简历
2016/03/30 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
python下载的库包存放路径
2020/07/27 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
施工员岗位职责
2014/03/16 职场文书
共产党员承诺书
2014/03/25 职场文书
村干部承诺书
2014/03/28 职场文书
设计师求职信模板
2014/05/06 职场文书
青安岗事迹材料
2014/05/14 职场文书
区域经理岗位职责
2015/02/02 职场文书
导游词之天津古文化街
2019/11/09 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python