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 浏览器返回按钮/手机返回按钮事件监听的更多相关文章

  1. Java Swing实战(四)按钮组件JButton及其事件监听

    接下来为面板添加保存按钮,并为按钮绑定事件监听. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class WeimingSyn ...

  2. Android点击Button按钮的四种事件监听方法总结

    首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:a ...

  3. Android——按钮的事件监听

    关于Button按钮的四种事件监听方法总结 首先我们在activity_main.xml里面先定义一个Button空间 <RelativeLayout xmlns:android="h ...

  4. React.js 小书 Lesson9 - 事件监听

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...

  5. [问题贴]mui.openWindow+自定义事件监听操作让alert()执行两次

    仔细看,Alert函数执行了两次 共两个页面:index.html和detail.html, detail.html为按钮设置了自定义事件监听(newsId),触发alert. 在index.html ...

  6. 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现

    [背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...

  7. IOS微信浏览器返回事件监听问题

    业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页 采取方法:采用onpopstate事件监听url改变,从而跳转到主页 遇到的问题:安卓上测试没问题:苹果手机 ...

  8. 第34天学习打卡(GUI编程之组件和容器 frame panel 布局管理 事件监听 多个按钮共享一个事件 )

    GUI编程 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事件 破解工具 1 简介 GUi的核心技术:Swing AWT 1.界面不美观 2.需要jre环境 为什么要学习GU ...

  9. HTML5 storage事件监听

    引用<h5移动web开发指南>上的话: “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发” 所以,localStorage  st ...

  10. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

随机推荐

  1. php 会话控制(了解cookie与session之间的区别与联系)

    相同点: 都可以在解决HTTP无状态的问题,使同一个客户端在访问网站的多次请求中,可以保存,设置信息,并且在请求事物之间建立联系. 不同点: 简单的说cookie的信息保存在客户端,session的信 ...

  2. 探究 encode 和 decode 的使用问题(Python)

    很多时候在写Python程序的时候都要在头部添加这样一行代码 #coding: utf-8 或者是这样 # -*- coding:utf-8 -*- 等等 这行代码的意思就是设定同一编码格式为utf- ...

  3. 005.FTP本地用户访问

    一 新建本地用户 [root@imxhy ftp]# useradd ftpuser #用于登陆ftp的用户 [root@imxhy ftp]# passwd ftpuser Changing pas ...

  4. JDK1.8快速入门

    JDK8提供了非常多的便捷用法和语法糖,其编码效率几乎接近于C#开发,maven则是java目前为止最赞的jar包管理和build工具,这两部分内容都不算多,就合并到一起了. 愿编写java代码的过程 ...

  5. 【BZOJ5137】Standing Out from the Herd(后缀自动机)

    [BZOJ5137]Standing Out from the Herd(后缀自动机) 题面 BZOJ 洛谷 题解 构建广义后缀自动机 然后对于每个节点处理一下它的集合就好了 不知道为什么,我如果按照 ...

  6. [USACO06JAN]Redundant Paths

    OJ题号:洛谷2860.POJ3177 题目大意: 给定一个无向图,试添加最少的边使得原图中没有桥. 思路: Tarjan缩点,然后统计度为$1$的连通分量的个数(找出原图中所有的桥). 考虑给它们每 ...

  7. 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 ...

  8. 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

    分为4个步骤: 1)  当发送一个 URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务 ...

  9. pygame系列_小球完全弹性碰撞游戏_源码下载

    之前做了一个基于python的tkinter的小球完全碰撞游戏: python开发_tkinter_小球完全弹性碰撞游戏_源码下载 今天利用业余时间,写了一个功能要强大一些的小球完全碰撞游戏: 游戏名 ...

  10. OSX下面用ffmpeg抓取桌面以及摄像头推流进行直播

    参考博客 http://blog.chinaunix.net/uid-11344913-id-4665455.html 在osx系统下通过ffmpeg查看设备 ffmpeg -f avfoundati ...