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

Question

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

Answer 1

如果用户跟踪指向您网页的链接,则无法覆盖以下行为,单击"返回"会再次将其关闭.

但是,您可以在页面上执行JavaScript操作,将条目添加到历史记录中,就好像它们是对新页面的点击一样,并控制在这些点击的上下文中使用"后退"和"前进"进行操作.

有一些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

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

第一。在整个应用程序中修改窗口的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()
    }
}

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