Deep Linking — част 3 — Fix за IE7

Завършвайки втора част на урока за deep linking споменах, че сайтът, който сме направили в момента не поддържа IE7. В този кратък урок ще допълним няколко реда, които да се погрижат сайтът ни да работи правилно и на този браузър

Ще работим с файловете от предния урок.

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

$.address.change(function (e) {
	console.log($.address.value());
	
	// ...
});

Използвайки console.log() можем да изпишем в конзолата на браузъра стойността на променлива или резултат от функция. Всички модерни браузъри имат конзола. IE7 не е сред тях, но след малко ще говорим и за него. Имайте предвид, че ако в IE конзолата не е отворена, то викането ѝ във функции би довело до грешка. Тя от своя страна прекратяване на по-нататъшното изпълнение на JavaScript.

Тествайки в Google Chrome (можем да видим конзолата като натиснем ctrl+shift+j) виждаме, че резултатът е “/” или “/{pagename}.html”. Където “{pagename}” е името на страницата, която сме посетили, в случай че тя не е началната.

IE developer tools

За да тествам на IE7 аз всъщност използвам по-нова версия на IE. Когато натиснете F12 ще видите developer tools менюто на IE. Докато менюто е отворено, няма да имате проблеми с console.log(). За да видим точно конзолата трябва да кликнем на съответния таб. Резултатът е, че IE показва нещо подобно на: “/http://localhost/tutorials/deep-linking/slider.html” (поне на моя локален сървър е това). Резултатът от функцията отново започва с “/”, но включва пълния адрес на страницата, която искаме да заредим.

replace()

За да решим проблема трябва да направим няколко проверки преди AJAX request-а, който правим. Да започнем с премахването на “/” от адреса, тъй като това е напълно излишно:

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

Използвам replace() функцията, чиито първи аргумент се търси в string-а, за който я викаме. Вторият е стойността, с която заменяме. Първият аргумент може да бъде просто string или регулярен израз. В JavaScript регулярен израз може да се напише между две наклонени черти (/regex/). По същия начин string може да се създаде като просто го заградим в кавички ('string' или "string"). Когато знакът ^ се постави в началото на регулярен израз, той обозначава начало на реда. Така ще заменим наклонената черта само ако тя е в началото на адреса. След това изписваме самата наклонена черта, но трябва да я escape-нем. Това е защото тя има специално значение в регулярните изрази в JS. Използваме я като начало и край на регулярния израз. По същия начин escape-ваме и кавичките в string — ‘that\’s how we do it’. Накрая приключваме регулярния израз с обикновена наклонена черта. Вторият аргумент във функцията е празен string, тъй като искаме просто да премахнем наклонената черта. Искаме да я заменим с нищо.

match()

Следва да направим проверка дали стойността на променливата url е абсолютен (IE7) или релативен път (останалите браузъри). Тази проверка можем да направим с функцията match().

var match = url.match('http');

Подобно на replace функцията match може да приеме обикновен string или регулярен израз. Този път ще опитаме със string. Макар че бихме могли да използваме и: /^http/. Така ще се уверим, че съвпадението не е някъде по-късно в адреса, а в началото. Това би било най-правилната проверка, но за простота тук ще пропуснем тази част.

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

if (url.match('http')) {
	// handle IE7
} else {
	// handle other browsers
}

Комбиниране на IE7 и нормални браузъри

В случая на IE7 обаче просто трябва да заредим съдържанието от абсолютния URL. А на останалите браузъри трябва да добавим нашия root и да заредим съдържанието от получения релативен URL. Така накрая получаваме:

$.address.change(function (e) {
	var url = $.address.value().replace(/\//, '');
	
	if (!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());
			
			$('title').html($(data).filter('title').html());
			$('header').html($(data).find('header').html());
		} else {
			// tell the user we could not connect to the server
		}
	});
});

На https://magadanski.com/demo/deep-linking/ можете да видите обновено демо. Ако сте гледали демото по-рано може да се наложи да refresh-нете, защото файловете най-вероятно ще са кеширани от браузъра ви.