HTML5 / jQuery: pushState и popState - глубокие ссылки? - PullRequest
Новая
       1

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

6 голосов
/ 08 января 2012

сначала я не могу понять, для чего предназначен первый параметр в функции 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);
    });

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

Ответы [ 2 ]

6 голосов
/ 08 января 2012

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

С документация

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

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

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

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

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

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

4 голосов
/ 18 декабря 2012

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

...