时间戳

首页 > 解决方案 > 如何拦截浏览器后退按钮并调用 Ajax 函数

javascript - 如何拦截浏览器后退按钮并调用 Ajax 函数

问题描述

我想拦截浏览器的后退按钮并调用 Ajax 函数来加载页面，因为我的网站完全是 Ajax 驱动的。我同时使用 Chrome 75 和 Firefox 67。

有很多关于拦截浏览器后退按钮的帖子和博客文章。我发现的最好的帖子是How to Detect Browser Back Button event - Cross Browser。我以这种方式实现了他的解决方案： 

<script>
document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
      console.log("inner click")
        //Your own in-page mechanism triggered the hash change
    } else {
      console.log("outer click")
      ShowPage(3);
        //Browser back button was clicked
    }
}
</script>

问题是它不会停止后退按钮——浏览器会在我的网站加载之前返回到上一页。我想调用 Ajax 函数 ShowPage 并拦截后退按钮，但这没有发生。

所以我用这个代替了它： 

<script>
function HandleBackFunctionality() {
  console.log("HandleBackFunctionality");
  console.log("Okay, I'm here");
  window.onbeforeunload = function() { return "Your work will be lost."; };
  ShowPage(3);
  return 0;

    if(window.event) {
        if(window.event.clientX < 40 && window.event.clientY < 0)
            console.log("Browser back button is clicked...");
        else
            console.log("Browser refresh button is clicked...");
    } else {
        if(event.currentTarget.performance.navigation.type == 1)
             console.log("Browser refresh button is clicked...");

        if(event.currentTarget.performance.navigation.type == 2)
             console.log("Browser back button is clicked...");
    }
}
</script>

但这根本行不通。我什至看不到是否出现任何 console.log 消息，因为我立即被带到我之前最后一次访问的站点。

此时，我要做的就是停止后退按钮，这样我就可以看到 console.log 消息了。最好它会停止默认的后退按钮功能并调用我的 Ajax 函数。

我没有发布函数 ShowPage 的代码，因为它在整个站点中被广泛使用，所以这不是问题。

感谢您在拦截后退按钮和调用我的 Ajax 函数方面提供的任何帮助。

标签： javascriptjqueryajax

解决方案

推荐阅读