HTML5 浏览器返回按钮/手机返回按钮事件监听
1.HTML5 History对象
支持使用pushState()方法修改地址栏地址,而不刷新页面。
popstate事件
当history实体被改变时,popstate事件将会发生。调用pushState()方法或者replaceState()方法是触发,当用户点击浏览器返回按钮时也会触发。
事件注册实例:
window.addEventListener('popstate', function (event) {
console.info(event);
console.info(event.state);
console.info(event.state.id);
});
2.根据这个事件,如果在触发是重新添加当前页面状态,这样的话用户通过返回按钮就无法离开这个页面了。
从而实现返回按钮被锁定的状态
<div id="number"></div> <script>
pushHistory();
var number=0;
window.addEventListener("popstate", function (e) {
// alert("我监听到了浏览器的返回按钮事件啦"); //根据自己的需求实现自己的功能
number++;
var p=document.createElement('p');
p.innerHTML=number;
document.getElementById('number').appendChild(p);
pushHistory(); //注,此处调用,可以用户一直停留着这个页面
}, false); function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
</script>
更多:
HTML5 History对象,Javascript修改地址栏而不刷新页面
HTML5 History对象,Javascript修改地址栏而不刷新页面(二)
HTML5 Geolocation API地理定位整理(二)
HTML5 浏览器返回按钮/手机返回按钮事件监听的更多相关文章
- Java Swing实战(四)按钮组件JButton及其事件监听
接下来为面板添加保存按钮,并为按钮绑定事件监听. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class WeimingSyn ...
- Android点击Button按钮的四种事件监听方法总结
首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:a ...
- Android——按钮的事件监听
关于Button按钮的四种事件监听方法总结 首先我们在activity_main.xml里面先定义一个Button空间 <RelativeLayout xmlns:android="h ...
- React.js 小书 Lesson9 - 事件监听
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...
- [问题贴]mui.openWindow+自定义事件监听操作让alert()执行两次
仔细看,Alert函数执行了两次 共两个页面:index.html和detail.html, detail.html为按钮设置了自定义事件监听(newsId),触发alert. 在index.html ...
- 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现
[背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...
- IOS微信浏览器返回事件监听问题
业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页 采取方法:采用onpopstate事件监听url改变,从而跳转到主页 遇到的问题:安卓上测试没问题:苹果手机 ...
- 第34天学习打卡(GUI编程之组件和容器 frame panel 布局管理 事件监听 多个按钮共享一个事件 )
GUI编程 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事件 破解工具 1 简介 GUi的核心技术:Swing AWT 1.界面不美观 2.需要jre环境 为什么要学习GU ...
- HTML5 storage事件监听
引用<h5移动web开发指南>上的话: “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发” 所以,localStorage st ...
- js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener 删除事件监听 ie 用 detachEven ...
随机推荐
- php 会话控制(了解cookie与session之间的区别与联系)
相同点: 都可以在解决HTTP无状态的问题,使同一个客户端在访问网站的多次请求中,可以保存,设置信息,并且在请求事物之间建立联系. 不同点: 简单的说cookie的信息保存在客户端,session的信 ...
- 探究 encode 和 decode 的使用问题(Python)
很多时候在写Python程序的时候都要在头部添加这样一行代码 #coding: utf-8 或者是这样 # -*- coding:utf-8 -*- 等等 这行代码的意思就是设定同一编码格式为utf- ...
- 005.FTP本地用户访问
一 新建本地用户 [root@imxhy ftp]# useradd ftpuser #用于登陆ftp的用户 [root@imxhy ftp]# passwd ftpuser Changing pas ...
- JDK1.8快速入门
JDK8提供了非常多的便捷用法和语法糖,其编码效率几乎接近于C#开发,maven则是java目前为止最赞的jar包管理和build工具,这两部分内容都不算多,就合并到一起了. 愿编写java代码的过程 ...
- 【BZOJ5137】Standing Out from the Herd(后缀自动机)
[BZOJ5137]Standing Out from the Herd(后缀自动机) 题面 BZOJ 洛谷 题解 构建广义后缀自动机 然后对于每个节点处理一下它的集合就好了 不知道为什么,我如果按照 ...
- [USACO06JAN]Redundant Paths
OJ题号:洛谷2860.POJ3177 题目大意: 给定一个无向图,试添加最少的边使得原图中没有桥. 思路: Tarjan缩点,然后统计度为$1$的连通分量的个数(找出原图中所有的桥). 考虑给它们每 ...
- Your local changes to the following files would be overwritten by merge: ... Please, commit your changes or stash them before you can merge
Git出现error: Your local changes to the following files would be overwritten by merge: ... Please, com ...
- 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
分为4个步骤: 1) 当发送一个 URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务 ...
- pygame系列_小球完全弹性碰撞游戏_源码下载
之前做了一个基于python的tkinter的小球完全碰撞游戏: python开发_tkinter_小球完全弹性碰撞游戏_源码下载 今天利用业余时间,写了一个功能要强大一些的小球完全碰撞游戏: 游戏名 ...
- OSX下面用ffmpeg抓取桌面以及摄像头推流进行直播
参考博客 http://blog.chinaunix.net/uid-11344913-id-4665455.html 在osx系统下通过ffmpeg查看设备 ffmpeg -f avfoundati ...