Когда кнопка "Назад" запускает popState, как я могу предотвратить обновление страницы?

Я пытаюсь изменить содержимое на моей странице без перезагрузки. В настоящее время мой код гласит:

window.onpopstate = function(event){
    // Ajax Request the Page and replace content with new content
};

Это работает, когда я нажимаю состояние, а затем запускаю событие popstate, но если я нажму кнопку "Назад" в браузере, он перейдет к URL-адресу вместо вызова моего события onpopstate. Как я могу предотвратить обновление страницы и обновление страницы с помощью моего вызова ajax?

edit: Я пытаюсь обновить с помощью pushState и popstate. Я надеялся сохранить хэш без ссылок.

Ответы

Ответ 1

Вы должны убедиться, что всегда существует состояние истории, которое вы нажали на текущей странице в истории, чтобы предотвратить нажатие кнопки "Назад" на загрузку страницы.

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

var foo = {foo: true}; // state object
history.pushState(foo, "unused argument", "#newInitialUri");
...
var bar = {bar: true}
history.pushState(bar, "unused argument", "#newStateOfWebApp");
...
window.onpopstate = function(event){
    ...
    var baz = {baz: true}
    history.pushState(baz, "unused argument", "#baseState");
};

В приведенном выше примере скажем, что мы загрузили '/'. script начинает выполнение, и URI окна браузера изменяется на '/# newInitialUri', но загрузка страницы не происходит. Затем сразу же после этого URI браузера изменяется на "/# newStateOfWebApp", и загрузка страницы не происходит.

Пользователь нажимает кнопку "Назад" в своем браузере. Ваш обработчик popstate срабатывает. Во время вашего обработчика event.state равно foo, а браузер uri - '/# newInitialUri'. Нагрузка страницы отсутствует. Обработчик завершает завершение, вызывая history.pushState, и теперь браузер uri является "/# baseState". Нагрузка страницы отсутствует. Если пользователь снова запустится, ваше событие popstate снова запустится, event.state будет равно foo (снова), браузер uri будет "/# newInitialUri" (без загрузки страницы), а затем снова будет "/# baseState" (без загрузки страницы).

Важно помнить, что event.state в вашем обработчике popstate всегда содержит объект состояния для URI, к которому вы только что вернулись, а не тот, с которого вы только что пришли. Сначала это меня сбивало с толку, но имело смысл, когда я думал об этом. Например, пользователь, возможно, только что вернулся на вашу страницу, возможно, отправившись в Google. Объект состояния - это ваша возможность сообщить статус вашего приложения в ваш код.

Имейте в виду, что некоторые браузеры запускают событие popstate при загрузке страницы (что должно произойти в соответствии с спецификацией из моего понимания). Обязательно проверьте свой объект состояния в своем обработчике перед выполнением кода, чтобы убедиться, что вы не запускаете код, который вы не собираетесь использовать при загрузке страницы.

Последнее замечание: если вы используете jQuery для обработки событий, вам нужно использовать event.originalEvent.state для ссылки на объект состояния.

Ответ 2

Этот может помочь

Событие unload отправляется элементу окна, когда пользователь переходит от страницы. Это может означать одно из многих. Пользователь мог щелкнуть ссылку, чтобы оставить страницу, или набрал новый URL-адрес в адресной строке. Кнопки вперед и назад вызовут событие. Закрытие окна браузера приведет к запуску события. Даже перезагрузка страницы сначала создаст событие разгрузки.

Ссылка

http://api.jquery.com/unload/

непроверенных

    $(window).unload(function(e){    
        e.preventDefault();
        $(window).trigger('popstate ');      

    });    

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

   //your ajax call here 
    });

и, наконец, вот DEMO нажмите кнопку браузера, чтобы увидеть, как он работает

Обновление

вы правы, чтобы выгрузить вас, но вы можете сделать что-то вроде

$(window).unload(function(e){
    e.preventDefault();
    $(window).trigger('beforeunload');   

});


$(window).bind('beforeunload',function(){

alert('call your ajax here');
    return '';
});

еще один DEMO