详解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 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
h5封装下拉刷新
Aug 25 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程序
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php学习之运算符相关概念
2011/06/09 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
RealTek面试题
2016/06/28 面试题
2014年社区妇联工作总结
2014/12/02 职场文书
感恩的心主题班会
2015/08/12 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python