jQuery 如何在页面加载时忽略 window.onpopstate?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15896434/
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-08-26 15:59:08  来源:igfitidea点击:

How can I ignore window.onpopstate on page load?

javascriptjqueryhtml

提问by Tamás Pap

I'm playing with window.onpopstate, and there is a thing that annoys me a little bit:

我在玩window.onpopstate,有件事让我有点恼火:

Browsers tend to handle the popstate event differently on page load. Chrome and Safari always emit a popstate event on page load, but Firefox doesn't.

浏览器倾向于在页面加载时以不同的方式处理 popstate 事件。Chrome 和 Safari 总是在页面加载时发出 popstate 事件,但 Firefox 不会。

source

来源

I tested it, and yeah, in Chrome and Safari 5.1+ the popstate event is fired on page load, but not in Firefox or IE10.

我测试了它,是的,在 Chrome 和 Safari 5.1+ 中,页面加载时会触发 popstate 事件,但在 Firefox 或 IE10 中不会。

The problem is, that I want to listen only to popstateevents where user clicked the backor forwardbutton (or the history was changed via javascript), but don't want to do anything on pageload.

问题是,我只想监听popstate用户单击后退前进按钮(或历史记录通过 javascript 更改)的事件,但不想在页面加载上做任何事情。

By other words I want to differentiate the popstateevent from page loadfrom the other popstateevents.

换句话说,我想将页面加载事件与其他事件区分开popstate来。popstate

This is what I tried so far (I'm using jQuery):

这是我到目前为止所尝试的(我正在使用 jQuery):

$(function() {
  console.log('document ready');

  setTimeout(function() {
    window.onpopstate = function(event) {
      // Do something here
    }, 10);
});

Basically I try to bind my listenerfunction to popstatelate enough to be not bound on page load, only later.

基本上,我尝试将我的listener函数绑定到popstate足够晚的时间,以便在页面加载时不被绑定,直到稍后。

This seems to work, however, I don't like this solution. I mean, how can I be sure that the timeoutchosen for setTimeout is big enough, but not too big (because I don't want it to wait too much).

这似乎有效,但是,我不喜欢这个解决方案。我的意思是,我如何确定为 setTimeout 选择的超时时间足够大,但又不会太大(因为我不想让它等待太多)。

I hope there is a smarter solution!

我希望有一个更聪明的解决方案!

回答by Marat Tanalin

Check for boolean truth of event.statein popstateevent handler:

检查的布尔真理event.statepopstate事件处理程序:

window.addEventListener('popstate', function(event) {
    if (event.state) {
        alert('!');
    }
}, false);

To ensure this will work, alwaysspecify a non-nullstate argument when calling history.pushState()or history.replaceState(). Also, consider using a wrapper library like History.jsthat provides consistent behavior across browsers.

为确保这将起作用,请始终null在调用history.pushState()或时指定非状态参数history.replaceState()。此外,请考虑使用像History.js这样的包装器库,它提供跨浏览器的一致行为。

回答by Burimi

I had a similar problem and i had to validate to make sure if page was loaded completely.

我遇到了类似的问题,我必须验证以确保页面是否已完全加载。

I used something like this :

我使用了这样的东西:

var page_loaded = false;    
window.onpopstate = function(event){
    if(!page_loaded){
       page_loaded = true;
       return false;
     }
    //Continue With Your Code
}

回答by kenorb

To react on popstateevent, you need to push some state onto the session history.

要对popstate事件做出反应,您需要将一些状态推送到会话历史记录中。

For example add this line to the document ready section:

例如,将此行添加到文档就绪部分:

history.pushState(null, null, window.location.pathname);

Not ideal, but it works in Chrome, Firefox and other browsers as well.

不理想,但它也适用于 Chrome、Firefox 和其他浏览器。

Then the event is fired correctly when user clicks on Backor Forwardbutton, also when history.back(), history.forward(), history.go()methods are called manually. Each time when popstatehas been invoked, you have to push another state again to make it working.

然后,当用户单击“后退”或“前进”按钮时history.back()history.forward()以及history.go()手动调用、、方法时,会正确触发该事件。每次popstate调用when 时,您必须再次推送另一个状态以使其工作。

See also:

也可以看看:

回答by Liang Zhou

It seems none of the browsers are emitting the event on page load any more as of today:

截至今天,似乎没有任何浏览器在页面加载时发出事件:

Browsers used to handle the popstate event differently on page load, but now they behave the same. Firefox never emitted a popstate event on page load. Chrome did until version 34, while Safari did until version 10.0.

浏览器过去在页面加载时以不同的方式处理 popstate 事件,但现在它们的行为相同。Firefox 从未在页面加载时发出 popstate 事件。Chrome 一直到版本 34,而 Safari 一直到版本 10.0。

Source: https://developer.mozilla.org/en-US/docs/Web/API/PopStateEvent

来源:https: //developer.mozilla.org/en-US/docs/Web/API/PopStateEvent