详解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实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php获取服务器信息的实现代码
2013/02/04 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
jquery.validate使用时遇到的问题
2015/05/25 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
Vue开发中整合axios的文件整理
2017/04/29 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python脚本实现网卡流量监控
2015/02/14 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
django缓存配置的几种方法详解
2018/07/16 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
投资意向书范本
2014/04/01 职场文书
户籍证明格式
2014/09/15 职场文书
通用员工手册范本
2015/05/14 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
初三化学教学反思
2016/02/22 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js