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

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

В последних двух уроках мы представили, как добавить перезагрузку страницы AJAX. Мы также показали, как кэшировать информацию. Естественный ход развития сайта, а также комментарии к урокам предполагают добавление диплинкинга..

Что такое глубокие ссылки?

Откройте страницы с предыдущей дороги: https://magadanski.com/demo/ajax-requests/. Качаем навигацию. Вас что-нибудь впечатляет? Хотя содержимое меняется, адрес страницы остается прежним. Это проблема, когда мы хотим дать ссылку на определенную страницу..

Глубокие ссылки — это возможность отображать разные состояния по одному и тому же URL-адресу. Используется, когда страница изменяет свое содержимое с помощью JavaScript. Используя JS, мы можем (и даже должны) обрабатывать дополнительную отправленную информацию в URL-адресе страницы. Таким образом, мы показываем то же состояние, которого достиг человек, нажав кнопку или что-то еще..

Глубокие ссылки могут потребоваться для лайтбоксов, вкладок, аккордеонов, целых страниц, загруженных с помощью AJAX (как в нашем случае), и многого другого. Поскольку на данный момент нам нужно только загрузить новый контент с помощью AJAX, мы позаботимся об этом случае. Позже мы добавим другие элементы, чтобы увидеть, как их лучше всего объединить..

Методы глубинных ссылок

Существуют различные способы отправки дополнительной информации в скрипты страницы через URL-адрес. Наиболее распространены стандартные аргументы GET. Они также могут быть легко использованы сервером, если наша страница сгенерирована каким-то серверным скриптом. Другой метод — через хеши URL.

URL GET аргументы

Это необязательные пары "ключ-значение", перечисленные после основной части URL-адреса. После ключа пишется знак равенства, а затем само значение. Перед отправкой к URL добавляется знак "?", Чтобы разделить их. Пары ключ-значение разделяются амперсандом (). Пример:

http://example.com/?arg1=val1arg2=val2

URL-хэш

После аргументов GET в URL-адресе идет (снова необязательный) хеш URL-адреса. Он отделяется диезом (#). Хеш-значение рассматривается как целое число. Доступ к нему можно получить в JavaScript с помощью window.location.hash. Чаще всего ожидается, что это всего лишь одно значение, которое нужно обработать определенным образом. Мы можем добавлять символы для отделения параметров от хеша. Поэтому, когда мы обрабатываем их должным образом, мы можем предоставить более обширную информацию..

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

Читать также:  Пользовательский параллакс без какихлибо библиотек

history.pushState

HTML5 hostory API JavaScript позволяет полностью изменить адрес, отображаемый браузером, без перезагрузки страницы. Еще лучше то, что новый адрес просто добавляется в историю браузера. Таким образом, мы можем легко нажать на кнопку «назад» (а затем «вперед») в браузере, и мы перейдем к правильному URL-адресу. В нашем случае это лучшее решение, потому что мы можем просто установить новый адрес.

Самым большим недостатком здесь является то, что таким образом мы теряем поддержку старых браузеров (IE 7/8/9)..

адрес jQuery

К счастью для нас, мы не первые, кто хочет добавить на наш сайт глубокие ссылки. Даже большинству нужна эта функциональность. Благодаря этому существуют различные библиотеки JS, которые упростят нам задачу решения проблем в разных браузерах. Адрес jQuery также позволяет нам использовать history.pushState в качестве основного метода работы. С минимальными усилиями мы также можем добавить поддержку IE 7/8 через хеши..

Почему именно адрес jQuery

По нескольким причинам:

  1. Потому что это плагин jQuery, и мы работаем с jQuery
  2. Потому что он был разработан тем же человеком, который в то время создавал адрес SWF..

Что такое адрес SWF?

Это самая старая (известная мне) библиотека JavaScript, которая использовалась для такой функциональности. Он появился задолго до веб-приложений HTML5 и HTML. Название может предполагать, что эта библиотека разрешила обмен данными с файлами SWF (флэш). Таким образом, адрес SWF был единственным способом для веб-приложений Flash предоставлять ссылки на их различные состояния..

Чтобы отдать должное человеку, разработавшему адрес SWF и jQuery Address — Ростислав Христов (да, он болгарин)!

Добавить функцию глубинных ссылок

Будем работать с файлами из урока запросов AJAX (без кеширования). Почему без кеширования? Потому что кеширование не является обязательным элементом. Несмотря на то, что он упрощен, он добавляет некоторую простоту коду. В этом случае мы стараемся, чтобы все было как можно проще. Это позволит вам попрактиковаться самостоятельно и добавить глубокие ссылки на кешированную версию..

Вот архив файлов, с которыми мы начнем работать.

Для начала загрузим плагин jQuery Address JS. Сделать это можно с официального сайта: http://www.asual.com/jquery/address/.

Читать также:  Псевдоселекторы CSS

Вы также можете работать с версией для разработчиков. Это последняя версия. Настолько новый, что он все еще находится в стадии разработки и, возможно, в нем есть ошибки. Еще во время написания туториала я попробовал, но результат оказался не так хорош, как со стабильной версией 1.5..

Dev-версию можно скачать с GitHub (папка src).

После того, как мы загрузили адрес jQuery (я сохранил его в js / jquery-address), нам нужно добавить его на наши страницы:

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
заголовок> Запросы AJAX / заголовок>
ссылка href = "http://fonts.googleapis.com/css?family=Open+Sans:300subset=latin,cyrillic-ext,cyrillic" rel = "stylesheet" type = "text / css" />
ссылка rel = "stylesheet" type = "text / css" href = "style.css" />
тип скрипта = "text / javascript" src = "http://code.jquery.com/jquery-1.8.3.min.js"> / script>
script type = "text / javascript" src = "js / jquery-address / jquery.address-1.5.js"> / script>
тип скрипта = "text / javascript" src = "js / func.js"> / script>
/ голова>

Помните, что он должен присутствовать на всех страницах (index.html, slider.html, accordion.html, tabs.html).

Интегрировать адрес jQuery

Теперь мы можем начать работу над фактической интеграцией jQuery Address..

Для начала давайте инициализируем адрес jQuery для ссылок из основной навигации. Прокомментируем остальную часть нашего кода, так как ее нужно будет немного изменить..

jQuery (функция ($) {$ .address.init (функция () {$ (‘nav a’). address ();})
// $ (документ) .on (‘click’, ‘nav a’, function (e) {// e.preventDefault (); // // $ .get ($ (this) .attr (‘href’) , function (data, status, XHR) {// if (status == ‘success’) {// $ (‘section [role = "e; main" e;]’). html ($ (data) .find (‘section = "role =" e; main "e;]’). html ()); // $ (‘title’). html ($ (data) .filter (‘title’). html ()) ; // $ (‘header’). html ($ (data) .find (‘header’). html ()); //} else {// // сообщаем пользователю, что мы не можем подключиться к серверу // } //}); //}); });

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

$ .address.change

jQuery (функция ($) {$ .address.init (функция () {$ (‘nav a’). address ();});
$ .address.change (функция (e) {}); });

Добавляем обработчик события address.change, который будет загружать информацию при изменении адреса браузера.

Читать также:  Хук GIT postmerge для объединения и минимизации JavaScript

jQuery (функция ($) {var root = ‘/ tutorials / deep-linking’;
$ .address.init (функция () {$ (‘nav a’). address ();});
$ .address.change (function (e) {$ .get (root + $ .address.value)), function (data, status) {if (status == ‘success’) {// обрабатываем загруженные данные} else { // сообщаем пользователю, что мы не можем подключиться к серверу}});}); });

Мы добавили корневую переменную, в которой будем хранить корневой URL-адрес сайта. Если наш сайт находится в базе домена — то эта переменная нам не понадобится. Но так как я работаю в папке «tutorials / deep-linking», мне нужно использовать такую ​​переменную. Это помогает мне создавать адреса для загрузки контента..

Остается только правильно обработать загруженную информацию:

$ .address.change (function (e) {$ .get (root + $ .address.value)), function (data, status, XHR) {if (status == ‘success’) {$ (‘section [role ] = "main"] ‘). html ($ (data) .find (‘ section [role = "main"] ‘). html ());
$ (‘заголовок’). html ($ (данные) .filter (‘заголовок’). html ()); $ (‘заголовок’). html ($ (данные) .find (‘заголовок’). html ()); } else {// сообщаем пользователю, что мы не можем подключиться к серверу}}); });

Пока все работает в Chrome, Firefox, Safari, Opera, Internet Explorer 10, 9 и 8. А как насчет IE7? Оказывается, способ добавления хеша для IE7 в jQuery Address заключается в том, что он включает полный адрес, а не только компонент добавленной нами ссылки. Есть 4 решения этой проблемы:

  1. Давайте изменим связи так, чтобы они были абсолютными, а не относительными
  2. Изменим ссылки так, чтобы они были относительными, но по корню сайта
  3. Давайте добавим несколько строк JS, в которых нужно проверить IE7 и в этом случае пропустить конкатенацию с корневой переменной.
  4. Да, прямая поддержка IE7

Я лично предпочитаю второй вариант. Доля рынка IE7 ниже 2%. Кроме того, IE7 — это четвертая версия IE с момента последней версии. Официально Google поддерживает только последние 2 основные версии всех браузеров. Так что они даже официально не поддерживают IE8.

Что случилось с history.pushState ()?

Этот урок стал слишком длинным, поэтому оставим его на следующий раз. Потом добавлю демонстрацию всего урока.

Если у меня хорошее настроение, мы можем исправить IE7.

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