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

【问题标题】：Javascript : Change the function of the browser's back buttonJavascript : 改变浏览器后退按钮的功能
【发布时间】：2009-09-22 21:27:26
【问题描述】：

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

【问题讨论】：

标签： javascript

【解决方案1】：

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

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

【讨论】：

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

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

是的，你可以。使用这个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));

这会将您的后退按钮重定向到您指定的位置。替换

【讨论】：

这段代码真的帮了我大忙。嗯，50%。可以用前进按钮做同样的事情吗？如果是这样，您能否帮助我提供一些示例代码？
这很骇人听闻，如果用户快速反复按下后退按钮，他们就会返回。至少这是我在 Chrome 中的测试。

【解决方案4】：

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

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

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

【讨论】：