点击浏览器后退按钮时触发事件

Question

我试图在单击浏览器后退按钮时运行一些代码。

如何在不更改浏览器历史记录的情况下找到浏览器的后退按钮？

我尝试了下面的代码。 我在

else

块中遇到异常：“事件未定义”。

window.onunload = HandleBackFunctionality();
  function HandleBackFunctionality()
  {
    if(window.event)
    {
      if(window.event.clientX < 40 && window.event.clientY < 0)
      {
        alert("Browser back button is clicked…");
      } else {
        alert("Browser refresh button is clicked…");
      }
    } else {
      if(event.currentTarget.performance.navigation.type == 1)
      {
        alert("Browser refresh button is clicked…");
      }
      if(event.currentTarget.performance.navigation.type == 2)
      {
        alert("Browser back button is clicked…");
      }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Answer 1

使用

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    // do something
  }
  if (direction == 'forward') {
    // do something else
  }
});

Answer 2

好的。除了您最初不应该触发事件以及

.unload = FunctionName

而不是

.unload=FunctionName()

并且您需要传递

event

参数这一事实之外，我在浏览器中检查了代码。

currentTarget

是空的 - 这完全有道理，因为没有像 onclick 这样的事件目标，但它只是站点重新加载/卸载。

请使用此自行调试代码并适合您的需求： window.onunload = HandleBackFunctionality;

function HandleBackFunctionality(event)
{
  console.log(event, window.event);
}

您将看到 currentTarget 未设置（而 event 已设置）。

Answer 3

这是唯一适合我的 IOS safari 解决方案。

  <script>
     window.addEventListener( "pageshow", function ( event ) {
     var pagehistory = event.persisted || 
                     ( typeof window.performance != "undefined" && 
                          window.performance.navigation.type === 2 );
     if ( pagehistory ) {
    // back button event - Do whatever.   
      }
      });
  </script>