Как игнорировать начальную загрузку popstate, работая с pjax

Я пытаюсь использовать кнопки назад для обратного браузера для работы на небольшом сайте с использованием 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);
  }
});

Ответ 1

Я действительно нашел решение внутри pjax.

Вместо этого:

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

который активировал popstate на начальной загрузке страницы, которую я сделал:

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

Ответ 2

Отметьте состояние при вызове 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 }); });

Ответ 3

Лучшим долгосрочным решением является голосование https://code.google.com/p/chromium/issues/detail?id=63040, чтобы заставить Google исправить это. Они знают, что они не соответствуют спецификации HTML5 около двух лет.

Ответ 4

Чтобы разрешить загрузку начальной страницы в виде всплывающего окна в браузерах Safari и Chrome, мы можем использовать функцию SetTimeOut.

Это просто работает!

  setTimeout( function() {
      window.addEventListener( 'popstate', myFunction, false );
    }, 500 );

Ответ 5

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)