Меню

Техники за напреднали

Влез Излез

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}“ е името на страницата, която сме посетили, в случай че тя не е началната.

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

За да решим проблема трябва да направим няколко проверки преди 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, тъй като искаме просто да премахнем налонената черта – да я заменим с нищо.

Следва да направим проверка дали стойността на променливата 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 обаче просто трябва да заредим съдържанието от абсолютния 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
		}
	});
});

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

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax