javascript History.js 中有没有办法知道何时按下后退按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8211068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 02:39:54  来源:igfitidea点击:

Is there a way in History.js to know when the back button was pressed

javascriptbrowser-historyhistory.js

提问by maraujop

I've started to test History.js. After understanding how it works and that there is no popstate, instead there is statechange. I'm looking for a way to differ when the back button of the browser has been pressed.

我已经开始测试History.js。在了解它是如何工作的并且没有popstate,而是有之后statechange。当浏览器的后退按钮被按下时,我正在寻找一种不同的方法。

The reason is that I need to know the URL before the state moved, from the one I'm going to. With the gistthe project includes, only the URL we go to is looked.

原因是我需要在状态移动之前知道 URL,从我要去的那个。根据项目包含的要点,只查看我们去的 URL。

I hope the solution is not to track latest URL visited in a global variable.

我希望解决方案不是跟踪在全局变量中访问的最新 URL。

Thanks

谢谢

采纳答案by maraujop

I finally managed all links using History.pushState, that way there is no need to differ a back button pressed. We handle all state changes the same way.

我终于使用 管理了所有链接History.pushState,这样就不需要区分按下的后退按钮了。我们以相同的方式处理所有状态更改。

Edit:Found these two issues in History.js' Github, might help someone. https://github.com/browserstate/history.js/issues/70https://github.com/browserstate/history.js/issues/47

编辑:在 History.js 的 Github 中发现这两个问题,可能对某人有所帮助。 https://github.com/browserstate/history.js/issues/70 https://github.com/browserstate/history.js/issues/47

回答by ashack

I found the solutions on github to be a bit overdone for my purposes. I created a bool that is always true except right before when I used History to change the state.

我发现 github 上的解决方案对我的目的来说有点过头了。我创建了一个始终为 true 的 bool,除非在我使用 History 更改状态之前。

var manualStateChange = true;

History.Adapter.bind(window,'statechange',function(){
    if(manualStateChange == true){
     // BACK BUTTON WAS PRESSED
    }
    manualStateChange = true;
});

Any time I change the state programmatically, set the bool to false:

每当我以编程方式更改状态时,将 bool 设置为 false:

manualStateChange = false;
History.pushState(null, null, currentPath);

回答by James Wagoner

I know this is a pretty dated question, but I came up to a solution to issues with the back/forward button when switching between a standard page and a History-state page.

我知道这是一个相当过时的问题,但我想出了一个解决方案来解决在标准页面和历史状态页面之间切换时后退/前进按钮的问题。

Scenario: Use HTML5 History (or history.js plugin) on a set of pages Then other pages we need real loads, aka a standard page (don't ask why, but there are certain use cases that this may be needed)

场景:在一组页面上使用 HTML5 History(或 history.js 插件) 然后我们需要真正加载的其他页面,也就是标准页面(不要问为什么,但有些用例可能需要这样做)

When you go from a History-state page, and do a real load to a standard page. You cannot go BACK: it changes the url, but doesn't load the page--it only fires a statechange; which I assume is the issue of the original post. My personal opinion is that this is a browser bug (all browsers have the issue, though), because the browser should know the page you're on was reloaded outside of the History-state page.

当您从历史状态页面转到标准页面时。你不能返回:它改变了 url,但不加载页面——它只触发 statechange;我认为这是原始帖子的问题。我个人认为这是一个浏览器错误(不过,所有浏览器都有这个问题),因为浏览器应该知道您所在的页面是在历史状态页面之外重新加载的。

I fixed this with something really simple: Listening to the statechange event and tell the browser to refresh when it does fire. This way I don't care if they go back or forward out of this page. If the browser thinks the state is changing (links don't fire the statechange event), only back/forward INTO a History state page fires this event, so it solves the issue.

我用一些非常简单的方法解决了这个问题:监听 statechange 事件并告诉浏览器在它触发时刷新。这样我不在乎他们是返回还是向前离开这个页面。如果浏览器认为状态正在改变(链接不会触发 statechange 事件),只有 back/forward INTO 历史状态页面触发这个事件,所以它解决了这个问题。

Code, using jQuery + History.js plugin:

代码,使用 jQuery + History.js 插件:

$(window).on('statechange', function() {
    window.location.reload();
});

If this doesn't make sense, you're probably not having this issue. However, I've noticed this on many sites that douse HTML 5 History (even pinterest.com has this issue if you reload when on an image modal and then try to go back).

如果这没有意义,则您可能没有遇到此问题。然而,我注意到这对许多网站使用HTML 5历史(如果你重装时的图像模式,然后尝试回去,甚至pinterest.com有这个问题)。

Hopefully, if you do have this issue, you'll find this answer and have a huge sigh of relief :)

希望如果您确实遇到了这个问题,您会找到这个答案并松一口气:)

回答by danger89

In the 'offical' version this feature is not available. Try to use this file in the main while: https://github.com/danger89/history.js/blob/master/scripts/bundled/html5/jquery.history.js

在“官方”版本中,此功能不可用。尝试在主要时使用此文件:https: //github.com/danger89/history.js/blob/master/scripts/bundled/html5/jquery.history.js

I can't guarantee that his solution works for every browser. But it's a nice solution. If you applied his changes, you can use:

我不能保证他的解决方案适用于每个浏览器。但这是一个很好的解决方案。如果您应用了他的更改,则可以使用:

var State = History.getState();
if (State.navigation) {
    // Back / forward button is pressed.
}

More information can be found on Github issue 47.

更多信息可以在Github 问题 47上找到。

回答by Tim Coysh

Similar answer than that of James Wagoner. the 'statechange' event was being fired both ways, so instead I only check for a 'popstate' event, which in my case is only called when the user goes back.

与詹姆斯瓦格纳的答案相似。'statechange' 事件是双向触发的,所以我只检查 'popstate' 事件,在我的情况下,它只在用户返回时调用。

window.addEventListener('popstate', function() {
  window.location.reload();
});