Что нужно использовать для обработки нажатий кнопок назад при использовании onPopState и pushState - PullRequest
Новая
       14

Что нужно использовать для обработки нажатий кнопок назад при использовании onPopState и pushState

4 голосов
/ 12 января 2011

Я использую pushState для изменения URL сайта: 

history.pushState("", "info", "/info");

Что отлично работает, но теперь кнопка назад не работает. Я считаю, что мне нужно написать собственное поведение кнопок «назад» и «вперед» с помощью onPopState, который просматривает стек истории и отображает соответствующую страницу. Хитрость в том, что когда «назад» задано значение Null, оно должно делать то, что обычно делает кнопка «назад» («вернуться» на страницу до того, как пользователь зашел на мой сайт).

Это похоже на довольно стандартное поведение, есть ли рецепт / какой-нибудь стандартный код, который я мог бы использовать?

Ответы [ 5 ]

2 голосов
/ 12 января 2011

Ах, я придумала решение, не такое сложное, как я думала (в основном, оно просто использует путь к URL для отображения нужных вещей): 

// Makes the back button work
window.onpopstate = function(event) {
    if (document.location.pathname == '/main') {
        $("#main").show();
        $("#info").hide();
        $("#settings").hide();
    }
    if (document.location.pathname == '/info') {
        alert('info');
        $("#main").hide();
        $("#info").show();
        $("#settings").hide();
    }
    if (document.location.pathname == '/settings') {
        alert('settings');
        $("#main").hide();
        $("#info").hide();
        $("#settings").show();
    }
};
1 голос
/ 07 июля 2013

Я только что столкнулся с этой проблемой сам, и мне кажется, я понял, почему она не работает.

Документация по этой теме кажется очень расплывчатой. То, что я прочитал, говорит о том, что вы можете ввести пустую строку (или пустой объект) в параметр состояния (как вы сделали в своем примере). 

history.pushState("", "info", "/info");

Когда я делаю это (тестирование в Chrome и Firefox), кнопки «назад» и «вперед» работают, в том смысле, что они меняют ссылку в адресной строке браузера. Однако это все, что они делают - страница, связанная с этой ссылкой, не загружается!

Итак, попробуйте это: 

history.pushState({state: dummyState}, "info", "/info");

Теперь кнопки «назад» и «вперед», кажется, работают так, как я ожидал. Как будто браузер говорит: «если нет« состояния »для блокировки, то я не буду беспокоиться о загрузке страницы».

Учитывая, что он работает одинаково в Firefox и Chrome, я предполагаю, что это документированная функция. Но если это так, он похоронен глубже, чем я хочу искать.

1 голос
/ 05 мая 2013

Без рамок это просто: 

window.onpopstate = function(event){
   // do something
}
0 голосов
/ 04 февраля 2011

Я не думаю, что вам нужно что-либо делать самостоятельно для реализации поведения кнопок «назад» и «вперед» после использования pushState, оно все равно должно работать как раньше, но оно будет вызывать popstate, а не делать запрос http и т. Д.

Я использую Davis.js для достижения чего-то похожего на то, что у вас есть, направляя определенные события onpopstate в поведение, проверьте это.

0 голосов
/ 30 января 2011

Странно, что кнопка «назад» не работает для вас.Я использую History.js , который обеспечивает обратную совместимость для всех браузеров, отличных от HTML5, и я не сталкивался с этой проблемой ни в одном из браузеров или тестовых пакетов ...попробовать?

...