代码之家  ›  专栏  ›  技术社区  ›  stack

如何在浏览器中检测“后退”按钮?

  •  3
  • stack  · 技术社区  · 7 年前

    back() 它将用于ajax调用。实际上,我有一个数组堆栈包含最后5个搜索结果,back函数将切换到上一个结果集 (根据该数组堆栈) window.history.pushState() 当你点击后退按钮。

    我刚才说的后退按钮,是浏览器中的一个元素,可以撤销 后退() 功能。现在我想撤销 后退() 当用户单击浏览器的“后退”按钮时也可以使用此功能。像这样:

    window.onhashchange = function() {
     back(); // this function also changes the url
    }
    

    但遗憾的是 window.onhashchange 当我点击浏览器背面时会被撤销两次。因为 将在您使用更改URL时被吊销 window.history.pushState() .

    不管怎样,我怎样才能检测到什么东西改变了URL?我的JS代码还是浏览器的back按钮?

    2 回复  |  直到 7 年前
        1
  •  4
  •   Adelin    7 年前

    你可以用 performance.navigation.type

    在任何给定点,例如 document.onload ,可以读取 type

    • 0 该页面是通过以下链接、书签、表单提交、脚本或在地址栏中键入URL来访问的。
    • 1 通过单击“重新加载”按钮或通过位置.重新加载()方法。
    • 2
    • 255

    请注意,根据兼容性表,支持是有限的。 然而,从外表看,这张桌子似乎过时了。它说它在chrome上不受支持,我只是测试了它,在我的chrome版本(67.0)上正常工作

        2
  •  1
  •   Nikola Lukic    7 年前

    这是我的想法,也许你需要纠正,但这是基础!

    var history = [];
    
    window.onload = function(){
    
      var handler;
    
      if ( localStorage.getItem('history') == null ) {
       // FIRST TIME
       history[0] = window.location.href;
       localStorage.setItem("history", JSON.stringify(history));
      }
      else {
       handler = localStorage.getItem('history');
       handler = JSON.parse(handler);
       history = handler;
       // Just compare now 
       if (history[history.length-1] == window.location.href) {
           // no change
       } else {
          history.push(window.location.href);     
       }
    
      }
    
    }
    
    window.onunload = function(){
    
       localStorage.setItem('history', JSON.stringify(history));
    
    }
    

    注:

    自2011年5月25日起,HTML5规范规定 窗口.警报(), 窗口.确认(),和窗口.提示()方法可能是 在此事件中被忽略。更多信息请参见HTML5规范 细节。