Могу ли я предотвратить запуск history.popstate при начальной загрузке страницы?

Question

Я работаю над сайтом, который обслуживает контент через AJAX.

Если вы щелкнете по пункту в меню, div контента обновится с ответом $.get, ничего особенного.

Я реализую history.pushState, чтобы разрешить навигацию с помощью кнопки браузера назад / вперед.

У меня есть следующее для загрузки контента в истории навигации:

$(function() {
    $(window).bind("popstate", function() {
        $.getScript(location.href); 
    });
});

Проблема в том, что когда страница загружается в первый раз, эта функция выполняет $.getScript, поэтому страница загружается немедленно снова. При первой загрузке страницы отображается исходное представление HTML, а при второй загрузке - представление JS, поскольку это запрос JS.

Как можно предотвратить запуск этого события на страницах с HTML-запросами?

Answer 1

Используя собственный HTML5 History API, вы столкнетесь с некоторыми проблемами, каждый браузер HTML5 обрабатывает API немного по-своему, поэтому вы не можете просто один раз кодировать его и ожидать, что он будет работать без применения обходных путей. History.js предоставляет кросс-браузерный API для API истории HTML5 и необязательный запасной вариант hashchange для браузеров HTML4, если вы хотите пойти по этому пути.

Для обновления вашего сайта доRIA / Ajax-приложение, вы можете использовать этот фрагмент кода: https://github.com/browserstate/ajaxify

, который является частью более длинной статьи Интеллектуальная обработка состояний , которая входит в объяснения о hashbang, хешах и истории html5api.

Дайте мне знать, если вам нужна дополнительная помощь :) Приветствия.

Answer 2

Вам нужно получить событие.originalEvent

// Somewhere in your previous code
if (history && history.pushState) {
  history.pushState({module:"leave"}, document.title, this.href);
}


$(window).bind("popstate", function(evt) {
  var state = evt.originalEvent.state;
  if (state && state.module === "leave") {
    $.getScript(location.href);
  }
});

Answer 3

Когда событие popstate запускается при загрузке страницы, оно не будет иметь свойства состояния в объекте события. Это позволяет вам проверить, запускается ли событие для загрузки страницы или нет.

window.onpopstate = function (event) {
  if (event.state) {
    // do your thing
  } else {
    // triggered by a page load
  }
}

Answer 4

Когда браузер загружается впервые, он всегда запускает событие popstate.Поэтому вам нужно определить, принадлежит ли вам это состояние или нет.

Когда вы выполняете pushState, убедитесь, что у вас есть объект состояния.Таким образом, вы можете проверить это позже.

Затем в обработчике popstate проверьте объект состояния:)

$(function() {
    $(window).bind("popstate", function(data) {
        if (data.state.isMine)
            $.getScript(location.href); 
    });
});

// then add the state object
history.pushState({isMine:true},title,url);

Дайте мне знать, если вам нужна дополнительная помощь:)

Answer 5

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

1. $(document).ajaxComplete(function(ev, jqXHR, settings) {
   
       var stateObj = { url: settings.url, innerhtml: document.body.innerHTML };
       window.history.pushState(stateObj, settings.url, settings.url);
   });
   
   
   window.onpopstate = function (event) {
       var currentState = history.state;
       document.body.innerHTML = currentState.innerhtml;
   };