精华内容
下载资源
问答
  • 如何监听浏览器的浏览记录
    万次阅读
    2018-07-20 10:50:44

    如何用js监听浏览器页面的关闭/刷新事件

    因为要做关闭页面退出功能,但页面跳转和刷新时并不做退出事件,需要甄别刷新和关闭,也查找了很多方法,踩了许多深坑,在这里记录一下自己的方法吧。
    

    不同的浏览器刷新和关闭时对onbeforeunload()和onunload()的执行步骤是不同的,没弄明白之前导致多种尝试都不见效,一丝丝头疼。
    ie、chrome、360:
    页面加载时执行unload();
    刷新时先执行onbeforeload(),新页面即将替换旧页面时onunload(),最后unload();
    关闭时执行onbeforeload(),再执行onunload().
    firefox:
    刷新时只执行onunload();
    关闭时只执行onbeforeunload().
    

    首先判断浏览器的类型,简便可用navigator.userAgent()获取浏览器的字符串,与浏览器类型做查找即可。
    目前对Chrome和firfox区分关闭和刷新成功。
    浏览器为firfox时flag为false,Chrome为true。

    window.onload(){
    window.onunload = function() {
                    if(flag){
                        console.log('关闭操作');
                    }
                    else {
                        console.log('刷新操作');
                    }
                };
    
                window.onbeforeunload = function () {
                    if(!flag){
                        console.log('关闭操作');
                    }
                    else{
                        console.log('刷新操作');
                    }
                };
           }
    更多相关内容
  • 控制监听浏览器回退

    2021-03-10 15:27:57
    控制监听浏览器回退 浏览器回退功能涉及到的相关API: pushState 方法 popstate 事件 需求 根据用户的查询条件,控制当前浏览器的url显示。 通过点击浏览器的回退按钮可以返回上一条的搜索条件。 基本思路 在...

    控制监听浏览器回退

    浏览器回退功能涉及到的相关API:

    • pushState 方法
    • popstate 事件

    需求

    • 根据用户的查询条件,控制当前浏览器的url显示。
    • 通过点击浏览器的回退按钮可以返回上一条的搜索条件。

    基本思路

    1. 在点击搜索时,将搜索条件添加到浏览器的URL中,并向历史记录中新增一条数据

      let searchContent = docoment.querySelector("#input");
      if(window?.history?.pushState){
         history.pushState(null,null,`?${searchContent}`)
      }
      
    2. 点击回退按钮时,通过URL获取到搜索条件,作为请求参数传递给后台

      window.addEventListener('popstate',handlePopstate,null);
      
      function handlePopState(){
          let decodeURI = decodeURIComponent(location.href);
          if (decodeURI.includes("?")) {
              let historyInput = decodeURI.split("?")[1];
      		let param = histortInput;
              ....
              // 进行搜素之后的相关操作
          }
      }
      

    相关API

    pushState
    • MDN链接:https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

    • 作用:向当前浏览器会话的历史堆栈中添加一个状态

    • 语法:

      history.pushState(state,title[,url])
      
    • 说明:使用pushState() 和 location,href 基本是一致的,都会在当前浏览器会话中新增一条历史记录。

    • 示例:

      const state = {"submit_id":1};
      const title = '';
      const url="?.content";
      
      history.pushState(state,title,url);
      
    popstate
    • MDN链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event

    • 作用:当活动的历史记录发生变化时,将会触发popstate事件

    • 触发条件

      • 用户主动触发:点击浏览器的后退、前进按钮
      • 代码触发:history.back(); history.go()history.forword()方法等
    • 说明:如果通过调用 history.pushState() 或者 history.replaceState() 触发历史记录的修改,则不会触发popState事件。

    • 示例:

      window.addEventListener('popstate', (event) => {
        console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
      });
      history.pushState({page: 1}, "title 1", "?page=1");
      history.pushState({page: 2}, "title 2", "?page=2");
      history.replaceState({page: 3}, "title 3", "?page=3");
      history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
      history.back(); // Logs "location: http://example.com/example.html, state: null
      history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
      

    参考链接:

    • 通过onpopstate()监控浏览器前进后退数据:https://newsn.net/say/history-popstate.html
    展开全文
  • 监听浏览器的前进和后退按钮

    千次阅读 2020-09-16 15:27:20
    项目需要兼容PC/H5,需要监听浏览器的前进和后退按钮点击并分别处理逻辑 监听popstate 对popstate关键字做监听方法,能够实时拦截用户点击前进按钮和后退按钮的操作,但不能够区分用户到底点击的是前进按钮还是后退...

    研究小程序好长一段时间了,写了一个仿小程序的前端路由。兼容PC/H5,并监听浏览器的前进和后退按钮点击并分别处理逻辑。

    路由源码

    监听popstate

    popstate关键字做监听方法,能够实时拦截用户点击前进、后退按钮的操作,但不能够区分用户到底点击的是前进按钮还是后退按钮

    监听popstate

    window.addEventListener("popstate", function (evt) {
      callback(evt) //响应前进、后退的回调方法
    }, false)
    

    pushState推送历史记录

    window.history.pushState({}, '页面标题', 'urlpath')
    

    如何监听前进/后退按钮

    需要对前进、后退分别响应,为了满足需求,为每一个pushState的参数添加一个time参数, 在每一次(前进/后退)操作对比对time值,并找到历史数据中的对应下标,从而确定用户点击的是前进按钮还是后退按钮

    let localHistory = []
    let param = {
      id: 'uniqid',
      url: 'uniqurl'
      title: '页面标题',
      time: (new Date()).getTime()
    }
    
    window.history.pushState(param, param.title, param.url)
    localHistory.push(param)
    

    上述代码分别在window.history和localHistory存储了一份相同的数据,重复上述操作(多次跳转链接)

    核心方法

    let popstateTime = 0
    
    function getHistoryItem(time){
      let index = findHistoryIndex({time})  // 从localHistory列表中查找
      let historyIndex = index - 1 // 取当前event.state对应的历史数据的上一条数据
      return findHistoryItem(historyIndex)
    }
    
    function setPopstateTime(time){
      let historyItem = getHistoryItem(time)
      popstateTime = (historyItem && historyItem.time) || popstateTime || 0
    }
    
    // 监听前进、后退按钮
    window.addEventListener("popstate", function (evt) {
      trigger(evt)
    }, false)
    
    function trigger(e){
      let state = e.state
      let time = state.time
      if (popstateTime === 0) {  // 第一次一定是后退按钮
        setPopstateTime(e.state.time)
        // redirectBack()
      } else {
        if (e.state.time >= this.popstateTime) {
          // 前进回调
        } else {
          setPopstateTime(e.state.time)
          // 后退回调
        }
      }
    }
    
    展开全文
  • Jquery 监听浏览器前进后退

    千次阅读 2018-02-27 17:15:00
    ps: 如果浏览的网页有缓存, 当点击浏览器上的 前进和后退 按钮时, 是优先加载浏览器的缓存数据,(重要一点是:不走服务器端代码,如果在服务器端代码加断点,是不过断点的, 这也是缓存的一个弊端,有时候容易导致...

     

    jQuery(document).ready(function () {
                      if (window.history && window.history.pushState) {
                          $(window).on('popstate', function () {
                    /// 当点击浏览器的 后退和前进按钮 时才会被触发, window.history.pushState('forward', null, ''); window.history.forward(1);//当前页 , }); }
              //在ie中必须有这两行 window.history.pushState('forward', null, ''); window.history.forward(1); });

     这段代码主要使用js的window.history  对象;介绍一下history的几个比较重要的方法:

    1、window.history.forward();   //加载下一个页面(浏览过的) ,和浏览器上的 前进按钮 效果相同

    2、window.history.back();    //回到上一个页面 , 和浏览器上的 后退按钮效果相同

    ps: 如果浏览的网页有缓存, 当点击浏览器上的 前进和后退 按钮时, 是优先加载浏览器的缓存数据,(重要一点是:不走服务器端代码,如果在服务器端代码加断点,是不过断点的, 这也是缓存的一个弊端,有时候容易导致表单中的数据错乱掉,不能及时更新,)

    3、history.go(0);    //刷新当前页面 和浏览器上的 刷新 按钮效果相同

    history.go(-1): 效果和history.back() 效果相同

    history.go(1) : 效果和history.forward() 效果相同

    PS:  js history对象示例代码

     

    4、window.history.pushState(状态码, 标题 , url)   /// 添加并激活一个历史记录条目, 向history 添加当前页面的历史记录,并修改当前页面的url。

    举个例子:

    假如当前页面的url是:http://localhost:28713/SBNext/index.aspx

    执行:window.history.pushState('forward', null, 'badu.aspx');    

    结果: 在浏览器历史记录中添加一条记录http://localhost:28713/SBNext/index.aspx。当前页面的url变成http://localhost:28713/SBNext/badu.aspx ,但是不会刷新页面,也不会检查url是否正确。  这时如果点击 浏览器的back按钮会回退到http://localhost:28713/SBNext/index.aspx页面, 还是当前页面。 所以这就是上面禁用back按钮 的原理。

     

    5、History.replaceStatet();   参数和pushState()函数一样, 作用替换当前的url。

    6、每当激活的历史记录发生变化时,都会触发popstate事件 , 点击浏览器的back 和 next 按钮会触发popstate事件 , 点击刷新按钮不会。

    所以可以使用 popstate 事件监听 back 和next 按钮是否被点击。

     

     

    转自 : https://www.cnblogs.com/generalLi/p/5887259.html

     

    补充: 

     当点击浏览器后退时 发出警告: 

    jQuery(document).ready(function ($) {
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                var hashLocation = location.hash;
                var hashSplit = hashLocation.split("#!/");
                var hashName = hashSplit[1];
                if (hashName !== '') {
                    var hash = window.location.hash;
                    if (hash === '') {
                        alert("Back button isn't supported. You are leaving this application on next clicking the back button");
                    }
                }
            });
            window.history.pushState('forward', null, './#forward');
        }    
    });

     

    参考:https://stackoverflow.com/questions/6359327/detect-back-button-click-in-browser

     

    转载于:https://www.cnblogs.com/liuq1991/p/8479924.html

    展开全文
  • 利用JAVA模拟JS的window.history.back()这种效果, 也不是要实现那个效果,就是想获取window.history.back()后的路径
  • 监听键盘ctrl+c ctrl+v area.onkeydown = (event) => { if (event.ctrlKey) { if (event.keyCode == 67) { alert('ctrl+c复制') event.keyCode = 0; }
  • 监听浏览器关闭事件,实现在刷新时或者浏览器关闭前我们可以写一些业务逻辑 需求1:H5游戏,在用户切换了标签页,(游戏界面处于非当前页面)暂停游戏 需求2:在线教学视频,在用户切换了标签页或者关闭浏览器后,...
  • ”---- 网易云热评环境:小攻:Kali 2020,ip:192.168.1.133 小受:win7 x86,ip:192.168.1.137一、生成木马及监听主机参考上篇文章:二、获取浏览器历史记录1、通过后渗透模块获取浏览器历史记录run post/window....
  • 监听浏览器回退事件

    千次阅读 2017-07-27 16:14:14
    Dom: Js: window.onload=function(){ addHistoryEntity(); ...//新增一条浏览器浏览历史记录 function addHistoryEntity(){ if(history.pushState){ //现代浏览器 history.pushState('s
  • 在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate事件进行监听返回、后退、上一页操作。一、简单介绍 history...
  • 说到这个,我想起了在csdn的时候关闭浏览器有弹出询问框的功能,于是百度和google监听浏览器关闭监听的方法,废话不多说,直接上代码。<!DOCTYPE html> <html> <head> &...
  • 浏览器历史记录

    千次阅读 2017-06-12 11:25:14
    前言项目开发时候,经常会涉及到关于浏览器历史记录的一些操作,比如当前页面点击微信返回按钮后跳转到某一特定页面等等。吃过这个苦,方之水之深,水深不可怕,关键在于勤。如何生成一条历史记录 简单粗暴的方法,...
  • 这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下pushstate与监听浏览器返回解决的问题1.实际开发我们在A...
  • 浏览器记录栈和history API的应用

    千次阅读 2017-08-11 10:42:06
    上篇博客,我使用hashchange函数来监听每次hash改变的时候,记录当前的scrollTop值到sessionStorage中,然后再进入该页面时就看sessionStorage中是否有记录值,如果有就在页面html内容全部加载完成后取出记录值使...
  • Fiddler 是一个 HTTP 调试代理,它能够记录所有的你电脑和互联网之间的 HTTP 通讯,Fiddler 也可以让你检查所有的 HTTP 通讯,设置断点,以及修改所有的“进出”的数据(指 Cookie/HTML/JS/CSS 等文件,这些都可以让...
  • “我喜欢你,做我女朋友可以吗?” 电话的那头没有反应,男生沉不住气了, 小心翼翼地问着,“你在干嘛呀?...1、通过后渗透模块获取浏览器历史记录 run post/windows/gather/forensics/brows...
  • 微信h5页面,监控手机物理返回键,关闭微信浏览器
  • js监控浏览器的操作状态: $(function(){ // 对于ie,谷歌,360:,页面加载时只执行onload // 页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件。 // 页面...
  • 计算用户浏览时长(微信浏览器

    千次阅读 2019-08-16 15:23:16
    关于计算用户浏览微信浏览器时长问题观看时长微信客户端浏览器微信pc端浏览器(以 QQ浏览器为例)完整代码: 最近公司提出这样的需求:希望能统计用户观看直播或录播的时间; 场景:从微信打开的浏览器 那就绞尽...
  • 开发过程中经常遇到这种情况:页面不允许返回到上一页面或者需要转到指定页面,这时候我们就需要监听到浏览器后退事件,从而将它的浏览历史...//监听浏览器后退事件 window.addEventListener("popstate", function(e) {
  • 使用 back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转。 向前和向后跳转 在history中向后跳转: window.history.back(); 这和用户点击浏览器回退按钮的效果相同。 类似地,你可以向前跳转...
  • history浏览器记录通过window.history下的pustState函数把数据写入到历史记录里面1.首先进行编码2.判断浏览器是否兼容window.history并写入到pustState3.监听前进,后退的按钮(第一种方法)4. 监听has变化(第二种...
  • Android接入WebView(三)——浏览器书签与历史记录与二维码分享 Android接入WebView(四)——浏览器书签与历史记录详细处理 Android接入WebView(五)——浏览器制作总结及源码分享 最近写了一个基于webview和...
  • 1.浏览器在全屏状态下按F11和Esc可以退出全屏,且全屏状态按这两个键无法被按键事件捕获,这给判断是否全屏状态带来了困难。 2.document.fullscreenElement可以判断是否全屏,但如果是通过F11的默认事件进入全屏的话...
  • type=code&scope=snsapi_userinfo&state=”+ urlparmas +"&connect_redirect=1#wechat_redirect") 登录时,会出现两个相同的页面在浏览器里,所以返回时会回到未登录的页面里。 为了解决这个问题,只能在第二个页面...
  • js 记录浏览器位置

    千次阅读 2017-11-12 14:59:58
    //监听浏览位置记录 $(function(){ var str = window.location.href; str = str.substring(str.lastIndexOf('/')+1), getCookie = sessionStorage.getItem(str); if(getCookie){ $('html,body').scrollTop...
  • 产品提来的一个需求 ,最近曲面屏手机比较火,用户的行为不想点击 叉号了,想...这个时候 我就没法反驳了 首先问了问安卓和苹果的童鞋 我们的h5是做不到, 直接监听人家的返回行为那是显然不行的 那这样就没办法...
  • VUE监听页面刷新和关闭事件

    千次阅读 2021-11-19 16:01:03
    Vue+Element,公司看板的使用人大多利用谷歌浏览器查看。。 前端请求权限流程:用户登陆后会把用户的信息加密处理放进cookies,,然后会用vue的拦截器,,拦截要发送的请求,,并且在每个请求的headers里面带上...
  • 主要介绍了详解Html5 监听拦截Android返回键方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,446
精华内容 9,378
关键字:

如何监听浏览器的浏览记录