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

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

在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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

DOM事件流与事件对象

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

Js事件系统

提到事件,相信每位Javascript开发者都不会陌生,由于Javascript是先有实现,后有规范,因此,对于大部分人来说,事件模块可以说是比较模糊的,本文将从不同角度帮助你理清楚事件模块。

angular怎么移除事件监听

在一个controller代码块被释放掉的时候,我们通常要将一些监听的事件同时释放掉,正常的$scope是不需要我们来维护的。当我们对$rootScope进行监听的时候,类似的全局变量或者说在其他地方依然有引用的变量是不会被释放掉的

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

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

js事件委托

今天呢,咱们来说说事件委托,有的相关资料叫事件代理.首先呢,先来讲讲事件委托的起源:由于事件处理程序可以为web应用提供交互能力,因此很多开发人员会不分青红皂白的向页面中添加大量的处理程序.在js中,

vue中的事件修饰符(.stop、.prevent、.self、.capture、.once)

使用.stop阻止事件的冒泡行为。使用.prevent阻止事件的默认行为。使用.self实现只有点击当前元素才会触发事件处理函数。使用.capture实现捕获触发事件的机制,即从外部事件开始执行。使用.once实现事件的触发次数为一次。

Js事件的截获

利用事件的捕获阶段,添加事件。再利用触发事件元素(e.target)来判断(根据一定的标识或者某些特征)是否是我们需要劫持的dom。

关于鼠标移动太快导致moseleave事件不触发的问题

我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。

js 任意元素解绑任意事件的兼容代码

解绑事件有三种:注意:用什么方式绑定事件,就应该用对应的方式解绑事件,解绑事件(IE 谷歌 火狐都支持 但是得对于的ON事件),对象.addEventListener(没有on的事件类型,命名函数,false);---绑定事件

JavaScript模拟事件的注意要点

DOM中的事件模拟三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:UIEvents(DOM3中的UIEvent)鼠标和键盘事件

点击更多...

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