Глубокие ссылки Часть 2

Глубокие ссылки - Часть 2

Пришло время для второй части урока, в которой мы представим новейшие возможности браузеров в отношении глубинных ссылок. Используя history.pushState () (часть JS API истории HTML5), мы изменим общий адрес страницы, а не просто добавим хеш.

Для работы будем использовать исходные файлы с начала урока..

Опять же, мы будем использовать адрес jQuery, который имеет встроенную поддержку history.pushState (). Такой способ работы плагина задается настройкой при начальной инициализации. Однако, чтобы правильно отправить этот параметр, нам нужно проверить, поддерживает ли браузер API истории HTML5:

var state = !! window.history.pushState;

Поскольку функции JavaScript являются объектами, мы можем проверить, существует ли свойство pushState в объекте window.history. Однако, поскольку нам нужна переменная логического типа, а не только сама функция, мы можем использовать приведение элементарного типа, просто добавив к значению восклицательный знак. Однако, если метод поддерживается, переменная будет ложной. Используя еще одно удивительное, мы превращаем значение в истинное..

Читать также:  Секундомер JavaScript Часть 2

Установить состояние

Мы говорим jQuery Address использовать HTML5 API с помощью метода $ .address.state (root). Где root — это путь к домашнему каталогу нашего проекта. В большинстве случаев это будет просто «/». Однако я лично использую «http: // localhost / tutorials / deep-linking /» при написании учебника. Итак, я собираюсь получить root права на "/ tutorials / deep-linking /".

jQuery (функция ($) {var root = ‘/ tutorials / deep-linking /’; var state = !! window.history.pushState;
$ .address.init (функция () {$ (‘nav a’). address ();});
$ .address.change (функция (е) {…});
если (состояние) {$ .address.state (корень); }});

Если вы тестируете сайт (в браузере, поддерживающем history.pushState), в тот момент, когда вы нажимаете на ссылку, новая страница перезагружается с AJAX. Кроме того, адрес браузера будет обновлен до адреса новой страницы. На данный момент вы даже можете запутаться, работает ли JavaScript или просто загружается новая страница. В чем тогда смысл? Дело в том, что вы можете добавить некоторый эффект перехода при отображении нового контента. Или показать какую-нибудь анимацию во время самой загрузки. Одни называют это «леденцом для глаз», а другие — «писклявым»..

Читать также:  Бандлеры

Если вы используете резервные версии IE 8/9 к решению из предыдущего урока.

Вы видите, как с правильным фундаментом мы можем добиться отличных результатов.

"У меня не работает IE 8/9/10!"

Непосредственное тестирование в этих браузерах в настоящее время вызывает небольшую проблему. IE «не справляется» с поведением совместимости с IE7, потому что ему не нравится HTML5 Doctype. Чтобы предотвратить этот сбой, мы можем просто добавить следующий метатег:

meta http-Equiv = "x-ua-совместимый" content = "IE = edge" /

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

Вы можете увидеть демонстрацию текущей ситуации здесь.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?