详解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新特性应用之过渡与动画
Jan 10 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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在线打包下载功能示例
2016/10/15 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
浅谈js原生拖放
2016/11/21 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
js编写简易的计算器
2020/07/29 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
读书心得体会
2013/12/28 职场文书
违纪检讨书2000字
2014/02/08 职场文书
大学生村官考核材料
2014/05/23 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书