zoukankan      html  css  js  c++  java
  • 监控浏览器的前进后退---window.onpopstate事件

    有时候,由于业务需求,需要监听用户的后退行为,比如禁止用户后退,比如想在用户后退是给链接加上参数,这该怎么办呢?window对象的popstate事件就派上用场了

    每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

    但是,调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

    要触发popstate事件,需要两步

    1.添加并激活一个历史记录条目(history.pushState)

    2.改变历史记录条目(用户行为,比如后退,前进)

     以下是一个场景,当用户触发popstate事件时,检测上一个页面的url,如果是指定url,则加上指定的查询字符串参数,便于后台知道访问url源自用户的"后退"等动作,而不是直接输入网址

    //添加并激活一个历史条目
    function pushHistory() {
        var state = {
        };
        window.history.pushState(state, "");
    }
    var url=document.referrer.replace('http://'+window.location.host,'');//上一页的url
    if(url.indexOf('/mobile/index/index')>-1){//如果上一页url是指定url
        var newIndex //用户触发popstate时间后,将要跳转的url
        if(url.indexOf('?')>0){//已经携带了查询字符串,则追加字符串
            newIndex=document.referrer+'&popstate=1'
        }else{//没有,则加上字符串参数
            newIndex=document.referrer+'?popstate=1'
        }
        pushHistory();//添加并激活一个历史条目
    //当触发popstate事件时,执行的逻辑
    window.addEventListener("popstate", function(e) { window.location.href=newIndex;//根据自己的需求实现自己的功能,我这里是跳转,也可以变成刷新,或者什么都不做,如果是什么都不做,需要再次添加并激活一个历史记录条目 }, false);

     Tips:

    1.后退/前进时,通常情况下,浏览器会重新渲染页面,但并没有对当前页面重新发起请求,而且控件的值不会变.

    2.微信浏览器(真机)的行为有些不一样,当后退时,如果后退后的一页有popstate事件,则会立即触发,这不是我们想要的.因此需要做一个小的改动

    var canPopstate=false //1秒内不运行执行popstate里的逻辑           
    setTimeout(function () {//1秒后才真正执行popstate触发后的逻辑
        canPopstate=true
    },5000)
    window.addEventListener("popstate", function(e) {
    
        if(canPopstate){//可以执行了
        //业务逻辑
        window.location.href='/'
        }else{//如果还没到1秒用户点击了后退,则继续添加历史记录
        history.pushState({},'','aa=bb')
        }
    }, false);
    history.pushState({},'','acc=ddd')

    以上代码可以防止微信浏览器内点击后退时立即执行popstate里的逻辑

    3.无论当前页面增加了几个历史,一旦请求其他页面,则后退只保留最新的历史.

    4.张鑫旭大神的history应用demo

  • 相关阅读:
    万亿养老市场如何抢占商机?云巢智慧康养物联网加速器,三招化解ISV痛点!
    13个VSCode使用技巧,开启高效的开发模式
    添零占位 —— 快速生成N个0的六种办法
    使用 dumi 打包 React 组件库并生成文档站点
    Transformer架构记录(四)
    Transformer架构记录(三)
    Transformer架构记录(二)
    Transformer架构记录(一)
    NLP预训练发展小结二(Bert之后)
    p3c 插件,是怎么检查出你那屎山的代码?
  • 原文地址:https://www.cnblogs.com/ch459742906/p/8449162.html
Copyright © 2011-2022 走看看