單擊瀏覽器后退按鈕時觸發事件

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 -argument 我檢查了瀏覽器中的代碼這一事實。

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>