详解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实现走马灯效果
Dec 26 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
新浪的图片新闻效果
2007/01/13 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python实现决策树分类
2018/08/30 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
道德演讲稿
2014/05/21 职场文书
联谊活动总结
2014/08/28 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
比较几种Redis集群方案
2021/06/21 Redis
mysql序号rownum行号实现方式
2022/12/24 MySQL
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript