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

IT技术 javascript
2021-03-17 01:15:17

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

5个回答

如果用户点击指向您页面的链接,则无法覆盖这种行为,单击“返回”会将他们再次从该链接中删除。

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

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

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

这段代码真的帮助了我。嗯,50%。可以用前进按钮做同样的事情吗?如果是这样,您能否帮我提供一些示例代码?
2021-05-06 01:15:17
这是 hacky,如果用户快速重复按下后退按钮,他们将返回。至少这是我在 Chrome 中的测试。
2021-05-18 01:15:17

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

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

我假设您希望创建一个不会在用户导航时重新加载网站的单页应用程序,因此您希望取消后退按钮的本机功能并将其替换为您自己的。这在移动网络应用程序中也很有用,例如在应用程序内使用后退按钮来关闭应用程序内窗口是很常见的。要在没有 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()
    }
}

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

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