Popstate при завантаженні сторінки в Chrome

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

Проблема добре відома - Chrome і Firefox по-різному ставляться до цієї події. Хоча Firefox не запускає його з першого завантаження, Chrome робить. Я хотів би мати стиль Firefox, а не запускати подію під час завантаження, оскільки він просто оновлює результати точно такими самими при завантаженні. Чи є обхідне рішення, крім використання History.js ? Причиною того, що я не хочу його використовувати, є те, що він сам потребує занадто багато бібліотек JS, і оскільки мені потрібно, щоб він був реалізований в системі управління вмістом із занадто великою кількістю 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, поки не буде завантажено перший цикл події циклу після завантаження документа. Це робиться за допомогою викликів prevenDefault і stopImmediatePropagation (на відміну від stopPropagation stopImmediatePropagation миттєво зупиняє всі виклики обробника подій).

Однак, оскільки документ readyState вже увімкнено, коли 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();
    }
};