监听浏览器返回,上一页事件

在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 实体。

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

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

  二、使用方法

    取消默认的返回操作:

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

    function pushHistory(){
      var state = {
           title: "title",
           url: "#"
        }
      window.history.pushState(state, "title", "#");
    }
    pushHistory()  2.监听 popstate 事件

    window.addEventListener("popstate", function(){

      location.reload();

    }, false)

  当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 导致页面反复刷新,而Firefox不会.

原文地址:https://www.cnblogs.com/xuniannian/p/8509481.html

时间: 2024-10-08 18:18:51

监听浏览器返回,上一页事件的相关文章

监听浏览器返回键、后退、上一页事件(popstate)操作返回键

在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一.简单介绍 history 中的操作 1.window.history.back(),后退 2.window.history.forward(),前进 3.window.history.go(num),前进或后退指定数量历史记录 4.window.history.pushState(state, t

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

在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一.简单介绍 history 中的操作 1.window.history.back(),后退 2.window.history.forward(),前进 3.window.history.go(num),前进或后退指定数量历史记录 4.window.history.pushState(state, t

vue监听浏览器返回

代码 监听返回 mounted () { if (window.history && window.history.pushState) { // 向历史记录中插入了当前页 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); } }, destroyed () { window.removeEventListener('popstate',

《解决微信内置浏览器返回上一页强制刷新问题方法》

微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置. BINGO~ 通过HTML5的history API + 缓存可以做到这一点. 执行原理: 1.0.通过history API的 history.pushState或 history.replaceState 保存AJAX状态: 2.0.同时将AJAX获取到的数据缓存起来(可以考虑使用H5的

监听浏览器返回按钮事件

pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 window.location = '/m/jfscapp/views/product/product_exchange.html'; }, false); function pushHistory() { var state = { title:

手机上万能返回上一页(wap2.0)代替history.go(-1)

最近在做wap2.0的手机wap,写返回上一页的时候,开始是用history.go(-1); 发现在手机上只有部分机器可以比如windows mobile 而在别的机器如nokia和ophone手机 上这些就不太好用了,经过左思右想终于想到了个山寨方法来解决这个流氓问题了... 不直接用手机的返回功能,而是通过读取 referrer 上得到上一页的链接来实现手机返回上一页功能 代码如下: Javascript CODE [javascript] view plaincopyprint? /*返回

监听当点击微信等app的返回按钮或者浏览器的上一页或后退按钮的事件

在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的 需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢. 首先我们要了解浏览器的history.大家知道在页面中我们可以使用JavaScript window history,后退到前面页面,但是由于安全原因javascript不允许修改 history里已有的url链接,但可以使用pushStat

JS 监听浏览器标签页显示隐藏

JS 监听浏览器标签页显示隐藏 API document.hidden 判断页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 document.visibilityState (只读属性), 返回document的可见性,4个值: hidden:文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' visible:此页面在前景标签页中,并且窗口没有最小化 prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 tru

js 监听浏览器刷新还是关闭事件

原作者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: //对于ie,谷歌,360: //页面加载时只执行onload //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件