12

我一直在尝试让前进和后退浏览器按钮在使用 pjax 的小型站点上工作，并提出以下代码来处理类更改和淡入淡出各种覆盖。

但是我发现 Chrome 和 Safari 将初始页面加载视为弹出状态，因此这让我很伤心。有没有办法阻止这一切？

$(window).on("popstate", function() {
  if ($('body').hasClass('info')) {
    $('body').removeClass("info").addClass("work");
    $('.info_overlay').fadeOut(duration);
    alert('popstate');

  } else if ($('body').hasClass('work')) {
    $('body').removeClass("work").addClass("info");
    $('.info_overlay').fadeIn(duration);    

  } else {
    $('body').removeClass("project").addClass("work");
    $('.project_overlay').fadeOut(duration);
  }
});
4

5 回答 5

29

调用时标记状态pushState()，然后忽略所有popstate没有标记的事件。例如

history.pushState({ myTag: true }, ...)

$(window).on("popstate", function(e) {
  if (!e.originalEvent.state.myTag) return; // not my problem
  // rest of your popstate handler goes here
}

不要忘记replaceState在页面加载时调用，以便在返回初始页面加载时处理 popstate。

$(function() { history.replaceState({ myTag: true }); });
于 2012-05-26T11:03:51.170 回答
3

我实际上在pjax本身中找到了解决方案。

而不是这样做： 

$(window).on('popstate', function() { ...

在我做的初始页面加载时触发了popstate：

$(window).on('pjax:popstate', function() {...
于 2012-05-26T20:26:34.797 回答
2

最好的长期解决方案是投票https://code.google.com/p/chromium/issues/detail?id=63040让谷歌解决这个问题。他们已经知道他们不符合 HTML5 规范已有大约两年了。

于 2013-12-04T21:20:50.483 回答
1

为了解决 safari 和 chrome 浏览器中初始页面加载为 popstate 的问题，我们可以使用SetTimeOut函数。

这简直行得通！ 

  setTimeout( function() {
      window.addEventListener( 'popstate', myFunction, false );
    }, 500 );
于 2016-03-08T11:19:19.960 回答
0 
var StateHelper = {

    pushState: function(url) {
        if(window.history.pushState) {
            window.history.pushState({"popstate": true}, '', url);
        }
    },

    updateStateData: function(stateData) {
        if(window.history.replaceState) {
            window.history.replaceState(stateData, '', window.location.href);
        }
    }
};

/**
 * NOTE: Webkit fires popstate event initial. So we modify the current state, but in the
 * event we still get null. So we can differentiate.
 */
StateHelper.updateStateData({"popstate": true});
window.addEvent('popstate', function(e) {
    if(e.event.state && e.event.state.popstate) {
        window.fireEvent('pophistory', e);
    }
});

（一个mootools解决方案）

于 2015-07-15T10:19:42.767 回答