关闭

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

时间: 2018-07-30阅读: 5658标签: 事件

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


一、简单介绍 history 中的操作

1.window.history.back(),后退

2.window.history.forward(),前进

3.window.history.go(num),前进或后退指定数量历史记录

4.window.history.pushState(state, title, utl),在页面中创建一个 history 实体。直接添加到历史记录中。

参数:state:存储一个对象,可以添加相关信息,可以使用 history.state 读取其中的内容。
   title:历史记录的标题(目前浏览器不支持)。
   url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

5.window.history.replaceState(),修改当前的 history 实体。

参数:state:存储一个对象,可以添加相关信息,可以使用 history.state 读取其中的内容。
   title:历史记录的标题(目前浏览器不支持)。
   url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

6.popstate 事件,history 实体改变时触发的事件。

7.window.history.state,会获得 history 实体中的 state 对象。


二、使用方法

取消默认的返回操作:

1.添加一条 history 实体作为替代原来的 history 实体 

function pushHistory() {
//    第一个实体
    var state = {
        title: "index",
        url: "https://www.cnblogs.com/smallclown/"
    };
    window.history.pushState(state, "index", location.href);
// 第二个实体
    state = {
        title: "index",
        url: "https://www.cnblogs.com"
    };
    window.history.pushState(state, "index", location.href);
// 第三个实体  不要以为最后的空实体没有用  可以解决上来就执行popstate的问题 相当于炮灰
    tate = {
        title: "index",
        url:""
    };
    window.history.pushState(state, "index", "");
}
// history.pushState(state, title, url);
// history.replaceState(state, title, url); 替换

2.监听 popstate 事件  

function addHandler() {
    pushHistory();
    window.addEventListener("popstate", function(e) {
                location.href = window.history.state.url;
            }
    });
    //或者
    window.onpopstate=function(e){
        location.href = window.history.state.url;
    }
}
addHandler();


PS:  

每次返回都会消耗一个 history 实体,若用户选择取消离开,则需要继续 pushState 一个实体 ;

如果把地址换了一个你想去的地址,就形成了一个简单的网页劫持


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/958

关闭

HTML5 手势检测原理和实现

随着 Hybrid 应用的丰富,HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生应用与生俱来的丰富的手势系统。HTML5 没有提供开箱即用的手势系统

JavaScript事件对象属性e.target和this的区别

Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行。DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。

js中什么是事件冒泡?

在一个对象上触发某类事件,这个事件会向这个对象的的父级传播,从里到外,直至它被处理或者到达了对象层次的最顶层,即document对象。这个过程就是JavaScript的事件冒泡。

jQuery 的58种事件方法你都用过了吗?

jQuery 事件方法:事件方法触发或将函数附加到所选元素的事件处理程序。下表列出了用于处理事件的所有jQuery方法。blur()附加/触发模糊事件;change()附加/触发更改事件

jquery的on绑定点击事件执行两次的解决办法

jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下

Js事件循环机制 Event loop

队列的特征先进先出;js是单线程的,任务都是排队执行,不会同步执行对个任务;js分为同步(赋值,循环,分支语句)和异步(ajax,dom事件,定时器);事件循环机制

深入nodejs-核心模块Events详解(事件驱动)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。

用js代码触发dom事件的实现方案

前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法,例如click、focus等

DOM事件流与事件对象

事件流描述的是从页面中接收事件的基础。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即是DOM事件流。举个例子,下面是给一个div注册了点击事件后,事件传播的过程。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!