Deep Linking Часть 3 Исправление для IE7

Deep Linking - Часть 3 - Исправление для IE7

Завершая вторую часть руководства по глубоким ссылкам, я упомянул, что сайт, который мы создали на данный момент, не поддерживает IE7. В этом коротком руководстве мы добавим несколько строк, чтобы убедиться, что наш сайт правильно работает в этом браузере.

Будем работать с файлами из предыдущего урока.

Мы начнем с проверки того, что именно $ .address.value () возвращает нам в функции изменения, которую мы написали:

$ .address.change (функция (e) {console.log ($. address.value ());
// …});

Используя console.log (), мы можем записать в консоль браузера значение переменной или результат функции. Во всех современных браузерах есть консоли. IE7 среди них нет, но мы поговорим об этом чуть позже. Обратите внимание: если консоль не открыта в IE, ее вызов в функциях приведет к ошибке. Это, в свою очередь, прекращает дальнейшее выполнение JavaScript..

Тестируя в Google Chrome (мы видим консоль, нажав ctrl + shift + j), мы видим, что результат — «/» или «/{pagename}.html». Где "{pagename}" — это имя страницы, которую мы посетили, в случае, если это не домашняя страница..

Инструменты разработчика IE

Для тестирования IE7 я использую более новую версию IE. Когда вы нажмете F12, вы увидите меню инструментов разработчика IE. Пока меню открыто, у вас не будет проблем с console.log (). Чтобы увидеть именно консоль, нам нужно перейти на соответствующую вкладку. В результате IE показывает что-то вроде: "/http://localhost/tutorials/deep-linking/slider.html" (по крайней мере, на моем локальном сервере это так). Результат функции снова начинается с "/", но включает полный адрес страницы, которую мы хотим загрузить..

Читать также:  Платформа анимации GreenSock (GSAP)

заменять ()

Чтобы решить эту проблему, нам нужно выполнить некоторые проверки перед выполнением запроса AJAX. Начнем с удаления символа "/" из адреса, поскольку он полностью лишний:

var url = $ .address.value (). replace (/ ^ \ //, »);

Я использую функцию replace (), первый аргумент которой ищется в строке, которую мы вызываем. Второе — это значение, которое мы заменяем. Первый аргумент может быть просто строкой или регулярным выражением. В JavaScript регулярное выражение можно записать между двумя косыми чертами (/ regex /). Точно так же строку можно создать, просто заключив ее в кавычки («строка» или «строка»). Когда символ ^ помещается в начало регулярного выражения, он указывает на начало строки. Это заменит косую черту, только если она стоит в начале адреса. Затем мы пишем сам косую черту, но мы должны ее избежать. Это потому, что он имеет особое значение в регулярных выражениях JS. Мы используем его как начало и конец регулярного выражения. Таким же образом мы избегаем кавычек в строке — «вот как мы это делаем». Наконец, мы заканчиваем регулярное выражение простой косой чертой. Второй аргумент функции — пустая строка, потому что мы просто хотим убрать косую черту. Мы хотим заменить его ничем.

Читать также:  Файлы

соответствие ()

Мы должны проверить, является ли значение переменной url абсолютным (IE7) или относительным (другие браузеры). Мы можем сделать эту проверку с помощью функции match ().

var match = url.match (‘http’);

Как и функция замены, совпадение может принимать простую строку или регулярное выражение. На этот раз мы попробуем со строкой. Хотя мы могли бы также использовать: / ^ http /. Это гарантирует, что совпадение будет не где-то позже в адресе, а в начале. Это будет наиболее правильная проверка, но для простоты мы опустим эту часть здесь..

Результатом функции match () является массив совпадений, которые у нас есть как отдельные элементы, или null, если совпадений нет. Нам достаточно просто проверить, есть ли у нас хотя бы одно совпадение. Таким образом, мы можем использовать только:

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

if (url.match (‘http’)) {// обрабатывать IE7} else {// обрабатывать другие браузеры}

Объединение IE7 и обычных браузеров

Однако в случае IE7 нам просто нужно загрузить контент с абсолютного URL-адреса. А в других браузерах нам нужно добавить наш корень и загрузить контент из полученного относительного URL. Итак, в итоге получаем:

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

На https://magadanski.com/demo/deep-linking/ вы можете увидеть обновленную демоверсию. Если вы смотрели демонстрацию раньше, вам может потребоваться обновить, потому что файлы, скорее всего, будут кэшированы вашим браузером..

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