HTML5 / jQuery: pushState и popState - глубокие ссылки?

Во-первых, я не могу понять, для чего нужен первый параметр в функции pushState? Что мне на это перейти? Я просто хочу изменить URL-адрес при прокрутке страницы. Я запрашиваю идентификатор текущего элемента в области просмотра, и его идентификатор также должен быть ссылкой в ​​URL-адресе. Это отлично работает с приведенным ниже кодом.

var currentHash,
        url;

    if (history && history.pushState) {

        $(window).scroll(function() {
            hash = $('.layer:in-viewport').attr('id');
            catHash = $("#"+hash).parent('section').attr('id');

            var data = "nothing";

            if ( catHash != undefined )
                url = "/" + catHash + "/" + hash;
            else
                url = "/" + hash;

            if ( currentHash != hash ) {

                window.history.pushState(data, hash, url);

            }

            currentHash = hash;

        });

    }

Теперь у меня два вопроса:

1.) Прямо сейчас URL-адрес в адресной строке успешно изменяется, когда я прокручиваю свою страницу. Как я могу запросить URL-адрес / хэш в адресной строке при первоначальной загрузке страницы. Итак, представьте, что теперь у меня есть ссылка типа www.url.com/deep Я хочу узнать, что такое / deep? Мне просто нужно запросить весь top.location и разделить его на каждый «/»? Я имею в виду, что эти ссылки на самом деле не существуют, так как мне избежать страниц 404 при вызове URL-адреса, которым я управлял с помощью функции pushState?

2.) Как узнать последнее изменение в адресной строке при нажатии кнопки «Назад»? Поэтому я хочу найти /deep при нажатии кнопки возврата в браузере, чтобы я мог вернуться к этому положению на странице. Я предполагаю, что это, вероятно, работает с popstate, но я не мог понять, как!

Спасибо за помощь!

Обновлять:

window.history.pushState("test", hash, url);

$(window).bind('popstate', function(event){
        console.log(event.data);
    });

Это всегда ноль. Разве это не должно возвращать «тест»?


person matt    schedule 08.01.2012    source источник
comment
event.state не event.data   -  person Quentin    schedule 08.01.2012
comment
Да, я пробовал это, но нет event.state, когда я console.log(event); Есть только данные, однако данные всегда равны нулю, и если я пытаюсь event.state регистрировать, они тоже всегда равны нулю!   -  person matt    schedule 08.01.2012
comment
Хорошо, решение найдено… похоже, $(window).bind('popstate', function(event){ не работает, а window.onpopstate = function(event) { работает!   -  person matt    schedule 08.01.2012
comment
@matt Если вы хотите получить доступ к данным состояния с помощью jQuery, вам нужно посмотреть event.originalEvent.state.   -  person Fauntleroy    schedule 26.03.2014


Ответы (2)


для чего нужен первый параметр в функции pushState?

Из документации

объект состояния - объект состояния - это объект JavaScript, связанный с новой записью в истории, созданной с помощью pushState (). Каждый раз, когда пользователь переходит в новое состояние, запускается событие popstate, а свойство состояния события содержит копию объекта состояния записи истории.

Таким образом, это набор данных по вашему выбору, который вы получите обратно, когда вернетесь в это состояние.

Прямо сейчас URL-адрес в адресной строке успешно изменяется, когда я прокручиваю свою страницу. Как я могу запросить URL-адрес / хэш в адресной строке при первоначальной загрузке страницы.

Посмотрите на объект location… но вам это не нужно. Вы можете (и должны) заполнять страницу на стороне сервера. Это одно из преимуществ pushState, ссылка по-прежнему работает, если JavaScript недоступен, а резервный сервер на стороне сервера плавно интегрируется.

Как узнать последнее изменение в адресной строке при нажатии кнопки «Назад»?

Вы добавляете прослушиватель событий (ищущий popState событие), и данные, которые вы в нем храните, будут доступны для объекта события. у MDN есть пример

person Quentin    schedule 08.01.2012
comment
Спасибо, почти понял. Я обновил свой вопрос для штучки popstate. Так что я мог хранить, например, строка в качестве первого атрибута данных в pushState и вернуть ее при нажатии кнопки «Назад», верно? Мне просто нужно знать, как я могу запросить последнее изменение, которое я сделал с помощью pushState, когда я нажимаю кнопку возврата в браузере. И еще кое-что: я получаю серверную вещь, однако как я могу (в моем случае) с одностраничным макетом вернуться на эту страницу и запросить адресную строку? У меня есть одностраничный макет, где я просто хочу изменить URL-адрес в определенной позиции на странице ... - person matt; 08.01.2012
comment
Когда я отправляю одну из этих сгенерированных (не расширяемых) глубинных ссылок, и кто-то открывает их в браузере, я хочу перейти к этой позиции на странице. Как вы можете видеть выше, /url просто соответствует идентификатору элемента в области просмотра… hash = $('.layer:in-viewport').attr('id'); Итак, когда div#example находится в области просмотра, мой URL-адрес выглядит как abc.com/example. Когда я перезагружаю страницу, я хочу запросить это /example, добавить # и перейти к этой позиции на странице. Как я могу это сделать? - person matt; 08.01.2012
comment
Как вы используете данные, которые там храните? - person Mild Fuzz; 21.09.2012

jQuery абстрагирует объект события, который вы хотите: event.originalEvent.state;

person Samuel Cole    schedule 17.12.2012