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

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

Если вы щелкнете элемент в меню, содержимое div будет обновлено с ответом $.get, ничего необычного.

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

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

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

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

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

Ответы

Ответ 1

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

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

Это часть более длинной статьи Intelligent State Handling, которая идет на объяснения хешбанов, хэшей и истории html5.

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

Ответ 2

Вам нужно получить event.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);
  }
});

Ответ 3

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

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

Ответ 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);

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

Ответ 5

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

$(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;
};