Javascript : 改变浏览器后退按钮的功能

Question

有没有办法让用户在浏览器上的后退按钮调用 javascript 函数而不是返回页面？

Answer 1

如果用户点击指向您页面的链接，则您无法覆盖这样的行为，单击“返回”将再次将其从页面中移除。

但是您可以在您的页面上进行 JavaScript 操作，将条目添加到历史记录中，就好像它们是对新页面的点击一样，并控制在这些点击的上下文中使用 Back 和 Forward 发生的情况。

有 JavaScript 库可以帮助解决这个问题， Really Simple History是一个流行的例子。

Answer 2

是的你可以。 使用这个js：

(function(window, location) {
    history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory");
    history.pushState(null, document.title, location.pathname);

    window.addEventListener("popstate", function() {
      if(location.hash === "#!/stealingyourhistory") {
            history.replaceState(null, document.title, location.pathname);
            setTimeout(function(){
              location.replace("http://www.programadoresweb.net/");
            },0);
      }
    }, false);
}(window, location));

这会将您的后退按钮重定向到您指定的 location.replace

Answer 3

我认为这会成功。 您可以编写自定义代码以在onpopstate函数内单击浏览器后退按钮时执行。 这适用于 HTML5。

 window.onpopstate = function() {
       alert("clicked back button");
    }; history.pushState({}, '');

Answer 4

我假设您希望创建一个在用户导航时不会重新加载网站的单页应用程序，因此您希望取消后退按钮的本机功能并将其替换为您自己的。 这在移动网络应用程序中也很有用，例如，在应用程序中使用后退按钮通常用于关闭应用程序内窗口。 要在没有库的情况下实现这一点，您需要：

第一个。 在整个应用程序中修改窗口的location.hash而不是location.href （这是标签默认执行的操作）。 例如，您的按钮可以触发修改location.hash的点击事件，如下所示：

button.addEventListener('click', function (event) {

    // Prevent default behavior on <a> tags
    event.preventDefault()

    // Update how the application looks like
    someFunction()

    // Update the page's address without causing a reload
    window.location.hash = '#page2'

})

对您拥有的每个按钮或标签执行此操作，否则它们会重定向到不同的页面并导致重新加载。

第二。 加载此代码，以便您可以在每次页面历史更改（前后）时运行一个函数。 除了我在本例中使用的开关，您可以使用 if 并检查其他状态，甚至是与location.hash无关的状态和变量。 您还可以完全替换任何条件，并在每次历史记录更改时运行一个函数。

window.onpopstate = function() {
    switch(location.hash) {
        case '#home':
            backFromHome()
            break
        case '#login':
            backFromLogin()
            break
        default:
            defaultBackAnimation()
    }
}

这将一直有效，直到用户到达他们从您的网站打开的第一页，然后它将返回新标签页，或者他们之前所在的任何网站。 这是无法阻止的，开发浏览器的团队正在修补允许这种情况的黑客攻击，如果用户想通过返回退出您的网站，他们希望浏览器这样做。

Answer 5

这对我有用； 非常简单的解决方案。 帮我省了很多麻烦

Answer 6

如果您正在创建一个单页 Web 应用程序，其中您的 html 正文有不同的部分，并且您希望通过后退按钮导航到您所在的上一个部分。 这个答案会对你有所帮助。

您的网站部分以 # 区分的位置。 如：

your-web-address.com/#section-name

只需执行几个步骤：

在 html 正文的每个部分中添加一个类和一个 id。 这里是“.section”

<section class="section" id="section-name">...</section>

在链接的 css（例如 style.css）文件中添加两个 CSS 类到您的 html（例如 index.html）文件中，例如：

.section .hide {
  display: none;
}
.section .active{
 dislplay: block;
}

将此 JavaScript 函数添加到您链接的 .js（例如 main.js）文件到您的 html 文件中。

window.onpopstate = function () {
    if (location.hash !== "") {
        const hash = location.hash;
        // Deactivating existing active 'section'
        document.querySelector(".section.active").classList.add("hide");
        document.querySelector(".section.active").classList.remove("active");
        // Activating new 'section'
        document.querySelector(hash).classList.add("active");
        document.querySelector(hash).classList.remove("hide");
    }
}