引子

之前,偶尔在项目中用过history接口做返回上一页功能,当时是用的history.go(-1),前几天面试中遇到一个控制浏览器跳转的问题时有点懵,特意查了文档记录一下,并且列出一些目前能想到的应用:

popstate事件

文档地址

当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。

就我目前的认识来看,无论是浏览器的前进还是后退都会触发这个popstate事件,所以只能起到一个监听页面变化的作用。

History 接口

  • 属性

    • History.length 表示历史会话中元素的数目
    • History.scrollRestoration 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)。
    • History.state 返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态而的方式。
  • 方法
    • History.back()

    等同于history.go(-1)

    • History.forward()

    等同于historygo(1)

    • History.go()

    这个方法中如果参数超出范围或者不对就不会起效果

    • History.pushState()

    pushState() 带有三个参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址。下面将对这三个参数进行细致的检查

    function pushHistory() {
    var state = {
    title: "title",
    url: "#"
    };
    window.history.pushState(state, "title", "#xx");
    }

其他方法就不一一列举了,感兴趣的看文档

监听浏览器返回按钮

function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#xx");
}
pushHistory();
window.addEventListener("popstate", function(e) {
console.log(e);
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);

这个地方就监听了浏览器的返回事件,但我有个疑问,如果不先pushState一个地址就监听不到,直接跳转了,这个暂时没搞懂,有知道的小伙伴可以留言讨论一下。

禁止返回上一页的一种方案

history.pushState(null, null, document.URL);
window.addEventListener("popstate",function(e) {
console.log(e);
history.pushState(null, null, document.URL);
}, false);

这个其实就是利用pushState向浏览历史列表中插入当前页面,在点击后退前和点击时都插入一次,那样无论点前进还是后退永远都会留在这个页面了

如果大家还有什么关于利用history接口和popstate结合控制页面跳转的实际应用案例,欢迎留言讨论交流!

利用popstate事件和window下的history对象处理浏览器跳转问题的更多相关文章

  1. html5之history对象 控制浏览器前进或后退事件

    一.摘要: 总结用history对象操作浏览器的历史记录的方法,在项目中使用的是mui框架,总结中包括我在实际项目中遇到的问题. 二.总结: 实现效果: 实现代码: 上面的编辑页面加载的时候就要先调用 ...

  2. 监听浏览器返回,pushState,popstate 事件,window.history对象

    在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...

  3. 深入学习 History 对象管理浏览器会话历史

    History对象允许我们操作浏览器会话历史,即加载当前页面的标签页窗口或frame窗口的访问历史.之前有同学咨询我如何实现拦截用户跳转页面并强制用户返回首页后重新请求页面,于是有了本篇博客的主题,本 ...

  4. BOM之history对象

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...

  5. BOM之history对象(转)

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...

  6. BOM函数之history对象

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...

  7. HTML5 History对象,Javascript修改地址栏而不刷新页面

    一.History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. ...

  8. BOM 浏览器对象模型_当前窗口的浏览历史 history 对象

    当前窗口的浏览历史 window.history 对象 保存了当前窗口访问过的所有页面网址 由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航 history.back() 相当于 h ...

  9. 使用history.pushState()和popstate事件实现AJAX的前进、后退功能

    上一篇文章中.我们使用location.hash来模拟ajax的前进后退功能.使用location.hash存在以下几个问题: 1.使用location.hash会导致地址栏的url发生变化.用户体验 ...

随机推荐

  1. ORM规约变更经典案例---mysql军规

    先介绍一下<MySQL数据库开发的三十六条军规>,这里只介绍核心的,具体内容大家可以自行百度,这是从底层开发人员到管理者必须知道规范.出自58赶集. 写在前面的话: 总是在灾难发生后,才想 ...

  2. 关于在jsp中的路径问题

    前言: jsp作为javaweb开发中常见的视图技术,我们平时在开发项目使用的过程中,经常会导入一些静态资源,比如css\js\jpg.png等图片格式的文件,这些文件的路径成了问题,经常会出现索引不 ...

  3. 使用supervisor 进行进程管理时调整最大文件打开数

    [supervisord]logfile=/tmp/supervisord.log ; 日志文件,默认是 $CWD/supervisord.loglogfile_maxbytes=50MB ; 日志文 ...

  4. PHP die与exit的区别

    最近听见有人说die和exit区别,bula~bula.决心一探究竟. 翻了翻PHP 5.6的源码(源码的位置为zend目录下zend_language_scanner.l大约是1014~1020行) ...

  5. hdu4143 A Simple Problem

    A Simple Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) ...

  6. [原创]Oracle 12c的备份和恢复策略

    Oracle 12c的备份和恢复策略(RMAN备份[开启归档/控制文件/数据文件/归档日志]): 备份策略: * 每半年做一个数据库的全备份(包括所有的数据和只读表空间) * 每周做一次零级备份 * ...

  7. java6 - 面向对象编程思想

    一.学习大纲: 1. 类的理解:对现实事物的抽象表示 2. 行为与特征的理解:在类抽象过程中,通常把行为抽象成方法,把特征抽象成属性 3. 对象的理解:类的一个实例即是对象 4. Object 根类 ...

  8. JVM笔记5-对象的访问定位。

    java虚拟机中指定一个栈内存的引用指向了堆内存中的对象.这样说只是笼统的说法.而指向堆内存中的对象就一定是栈引用所需要的那个对象吗?其实并不定. 这就需要知道对象的访问定位方式有两种: 1.使用句柄 ...

  9. spider RPC更新至2.0.0-RELEASE

    spider使用java语言开发,使用Spring作为IoC容器,采用TCP/IP协议,在此基础上,结合SaaS金融交易系统的特性进行针对性和重点设计,以更加灵活和高效的满足金融交易系统多租户.高可用 ...

  10. Python开发入门14天集训营-第一章

    python第一章 python变量 变量的作用 存数据 被程序调用和操作 标记数据 声明变量 name = "Ydh" 变量名 = 变量值 变量定义规范: 变量名只能是 字母.数 ...