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

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

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

我认为这样做会有所帮助。您可以编写自定义代码以在浏览器后退按钮上单击 onpopstate 功能。这适用于HTML5。

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

Answer 5

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

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

5 个答案: