Popstate при загрузке страницы в Chrome

Я использую History API для своего веб-приложения, и у меня есть одна проблема. Я выполняю вызовы Ajax для обновления некоторых результатов на странице и использую history.pushState () , чтобы обновить адресную строку браузера без перезагрузки страницы. Затем, конечно, я использую window.popstate , чтобы восстановить предыдущее состояние при нажатии кнопки возврата.

Проблема хорошо известна - Chrome и Firefox по-разному обрабатывают это событие popstate. Хотя Firefox не запускает его при первой загрузке, Chrome запускает. Я хотел бы иметь стиль Firefox и не запускать событие при загрузке, поскольку он просто обновляет результаты точно такими же при загрузке. Есть ли обходной путь, кроме использования History.js ? Причина, по которой я не хочу его использовать, заключается в том, что ему нужно слишком много JS-библиотек, и, поскольку мне нужно, чтобы он был реализован в CMS с уже слишком большим JS, я хотел бы минимизировать JS, который я помещаю в него .

Итак, хотелось бы знать, есть ли способ заставить Chrome не запускать popstate при загрузке или, может быть, кто-то пытался использовать History.js, поскольку все библиотеки собраны вместе в один файл.

В Google Chrome версии 19 перестало работать решение от @spliter. Как отметил @johnnymire, history.state в Chrome 19 существует, но он равен нулю.

Мое решение - добавить window.history.state! == null для проверки наличия состояния в window.history:

var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

Я тестировал его во всех основных браузерах и в версиях Chrome 19 и 18. Похоже, он работает.

Если вы не хотите принимать особые меры для каждого обработчика, добавляемого в onpopstate, мое решение может быть вам интересно. Большой плюс этого решения также в том, что события onpopstate могут обрабатываться до завершения загрузки страницы.

Просто запустите этот код один раз, прежде чем добавлять какие-либо обработчики onpopstate, и все должно работать должным образом (например, как в Mozilla ^^) .

(function() {
    // There's nothing to do for older browsers ;)
    if (!window.addEventListener)
        return;
    var blockPopstateEvent = document.readyState!="complete";
    window.addEventListener("load", function() {
        // The timeout ensures that popstate-events will be unblocked right
        // after the load event occured, but not in the same event-loop cycle.
        setTimeout(function(){ blockPopstateEvent = false; }, 0);
    }, false);
    window.addEventListener("popstate", function(evt) {
        if (blockPopstateEvent && document.readyState=="complete") {
            evt.preventDefault();
            evt.stopImmediatePropagation();
        }
    }, false);
})();

Как это устроено:

Chrome , Safari и, возможно, другие браузеры webkit запускают событие onpopstate после загрузки документа. Это не предназначено, поэтому мы блокируем события popstate до первого цикла цикла событий после загрузки документа. Это делается с помощью вызовов preventDefault и stopImmediatePropagation (в отличие от stopPropagation stopImmediatePropagation мгновенно останавливает все вызовы обработчика событий).

Однако, поскольку состояние готовности документа уже находится в состоянии «завершено», когда Chrome ошибочно запускает onpopstate, мы разрешаем события opopstate, которые запускаются до завершения загрузки документа, чтобы разрешить вызовы onpopstate до того, как документ будет загружен.

Обновление 2014-04-23: исправлена ​​ошибка, из-за которой события popstate блокировались, если сценарий выполнялся после загрузки страницы.

Использование только setTimeout не является правильным решением, потому что вы не знаете, сколько времени потребуется для загрузки содержимого, поэтому возможно, что событие popstate будет сгенерировано после тайм-аута.

Вот мое решение: https://gist.github.com/3551566

/*
* Necessary hack because WebKit fires a popstate event on document load
* https://code.google.com/p/chromium/issues/detail?id=63040
* https://bugs.webkit.org/process_bug.cgi
*/
window.addEventListener('load', function() {
  setTimeout(function() {
    window.addEventListener('popstate', function() {
      ...
    });
  }, 0);
});

Решение было найдено в jquery.pjax.js линий 195-225:

// Used to detect initial (useless) popstate.
// If history.state exists, assume browser isn't going to fire initial popstate.
var popped = ('state' in window.history), initialURL = location.href


// popstate handler takes care of the back and forward buttons
//
// You probably shouldn't use pjax on pages with other pushState
// stuff yet.
$(window).bind('popstate', function(event){
  // Ignore inital popstate that some browsers fire on page load
  var initialPop = !popped && location.href == initialURL
  popped = true
  if ( initialPop ) return

  var state = event.state

  if ( state && state.pjax ) {
    var container = state.pjax
    if ( $(container+'').length )
      $.pjax({
        url: state.url || location.href,
        fragment: state.fragment,
        container: container,
        push: false,
        timeout: state.timeout
      })
    else
      window.location = location.href
  }
})

Более прямое решение, чем повторная реализация pjax, - установить переменную в pushState и проверить переменную в popState, чтобы исходное popState не срабатывало непоследовательно при загрузке (не решение для jquery, просто используя его для событий):

$(window).bind('popstate', function (ev){
  if (!window.history.ready && !ev.originalEvent.state)
    return; // workaround for popstate on load
});

// ... later ...

function doNavigation(nextPageId) {
  window.history.ready = true;

  history.pushState(state, null, 'content.php?id='+ nextPageId); 
  // ajax in content instead of loading server-side
}

Начальному событию onpopstate Webkit не назначено состояние, поэтому вы можете использовать его для проверки нежелательного поведения:

window.onpopstate = function(e){
    if(e.state)
        //do something
};

Комплексное решение, позволяющее вернуться к исходной странице, будет основываться на этой идее:

<body onload="init()">
    <a href="page1" onclick="doClick(this); return false;">page 1</a>
    <a href="page2" onclick="doClick(this); return false;">page 2</a>
    <div id="content"></div>
</body>

<script>
function init(){
   openURL(window.location.href);
}
function doClick(e){
    if(window.history.pushState)
        openURL(e.getAttribute('href'), true);
    else
        window.open(e.getAttribute('href'), '_self');
}
function openURL(href, push){
    document.getElementById('content').innerHTML = href + ': ' + (push ? 'user' : 'browser'); 
    if(window.history.pushState){
        if(push)
            window.history.pushState({href: href}, 'your page title', href);
        else
            window.history.replaceState({href: href}, 'your page title', href);
    }
}
window.onpopstate = function(e){
    if(e.state)
        openURL(e.state.href);
};
</script>

Хотя это все еще может сработать дважды (с некоторой изящной навигацией), с этим можно справиться, просто проверив предыдущий href.

Это мой обходной путь.

window.setTimeout(function() {
  window.addEventListener('popstate', function() {
    // ...
  });
}, 1000);

Вот мое решение:

var _firstload = true;
$(function(){
    window.onpopstate = function(event){
        var state = event.state;

        if(_firstload && !state){ 
            _firstload = false; 
        }
        else if(state){
            _firstload = false;
            // you should pass state.some_data to another function here
            alert('state was changed! back/forward button was pressed!');
        }
        else{
            _firstload = false;
            // you should inform some function that the original state returned
            alert('you returned back to the original state (the home state)');
        }
    }
})   

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

В случае использования event.state !== nullвозврат в историю к первой загруженной странице не будет работать в немобильных браузерах. Я использую sessionStorage, чтобы отмечать, когда действительно запускается ajax-навигация.

history.pushState(url, null, url);
sessionStorage.ajNavStarted = true;

window.addEventListener('popstate', function(e) {
    if (sessionStorage.ajNavStarted) {
        location.href = (e.state === null) ? location.href : e.state;
    }
}, false);

В представленных решениях есть проблема с перезагрузкой страницы. Похоже, что следующее работает лучше, но я тестировал только Firefox и Chrome. Он использует действительность, которая кажется разницей между e.event.stateи window.history.state.

window.addEvent('popstate', function(e) {
    if(e.event.state) {
        window.location.reload(); // Event code
    }
});

Я знаю, что вы возражали, но вам действительно стоит просто использовать History.js, так как он устраняет миллион несовместимостей браузеров. Я пошел путем ручного исправления, но позже обнаружил, что проблем все больше и больше, о которых вы узнаете только в будущем. Сейчас это действительно не так сложно:

<script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/native.history.min.js" type="text/javascript"></script>

И прочтите api на https://github.com/browserstate/history.js

Это решило проблему для меня. Все, что я сделал, это установил функцию тайм-аута, которая задерживает выполнение функции достаточно долго, чтобы пропустить событие popstate, которое запускается при загрузке страницы.

if (history && history.pushState) {
  setTimeout(function(){
    $(window).bind("popstate", function() {
      $.getScript(location.href);
    });
  },3000);
}

Вы можете создать событие и запустить его после своего обработчика загрузки.

var evt = document.createEvent("PopStateEvent");
evt.initPopStateEvent("popstate", false, false, { .. state object  ..});
window.dispatchEvent(evt);

Обратите внимание: это немного не работает в Chrome / Safari, но я отправил патч в WebKit, и он должен быть скоро доступен, но это «самый правильный» способ.

Это сработало для меня в Firefox и Chrome

window.onpopstate = function(event) { //back button click
    console.log("onpopstate");
    if (event.state) {
        window.location.reload();
    }
};