详解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 26 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 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
eAccelerator的安装与使用详解
2013/06/13 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
JavaScript命名空间模式实例详解
2019/06/20 Javascript
Python简单生成随机数的方法示例
2018/03/31 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
软件设计的目标是什么
2016/12/04 面试题
银行演讲稿范文
2014/01/03 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
酒店开业策划方案
2014/06/02 职场文书
生日庆典策划方案
2014/06/02 职场文书
迎国庆横幅标语
2014/10/08 职场文书
美容院合作经营协议书
2014/10/10 职场文书
电话营销开场白
2015/05/29 职场文书