Меню

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

Влез Излез

Deep Linking – част 2

Дойде време и за втората част от урока, в която ще представим и най-новите възможности на браузърите във връзка с deep linking. С помощта на history.pushState() (част от HTML5 history JS API-то) ще променим цялостния адрес на страницата, а не просто добавяйки hash.

За работа ще използваме изходните файлове от предната част на урока.

Отново ще използваме jQuery Address, който има вградена поддръжка за history.pushState(). Този начин на работа на plugin-а се задава чрез настройка при първоначалната инициализация. За да подадем обаче правилно тази настройка трябва да направим проверка дали браузърът поддържа HTML5 history API-то:

var state = !!window.history.pushState;

Тъй като в JavaScript функциите са обекти, можем да проверим дали съществува property pushState в обекта window.history. Тъй като на нас обаче ни трябва променлива от булев тип, а не просто самана функция, можем да използваме елементарен type casting като просто добавим един удивителен знак пред стойността. Така обаче, ако методът се поддържа, променливата ще има стойност false. Използвайки още един удивителен обръщаме стойността до true.

Казваме на jQuery Address да използва HTML5 API-то чрез метода $.address.state(root). Където root е пътят до началната директория на нашия проект. В повечето случаи това би било просто „/“, но аз лично, пишейки урока, използвам „http://localhost/tutorials/deep-linking/“ за адрес на проекта, така че ще си задам root на „/tutorials/deep-linking/“.

jQuery(function ($) {
	var root = '/tutorials/deep-linking/';
	var state = !!window.history.pushState;
	
	$.address.init(function () {
		$('nav a').address();
	});
	
	$.address.change(function (e) {
		...
	});
	
	if (state) {
		$.address.state(root);
	}
});

Ако тествате сайта (с браузър поддържащ history.pushState) в мъмента при клик на линк новата страница ще се презареди с AJAX, а адреса на браузъра ще се обнови до този на новата страница. В момента реално дори може да се объркате дали JavaScript-а работи или просто зареждате нова страница. Какъв е смисълът тогава? Смисълът е, че може да добавите някакъв transition effect при показване на новото съдържание или по време на самото зареждане да покажете някаква анимация. На това някой му викат „eye-candy“, а други (както аз лично предпочитам) – „шукарийки“.

В случай, че използвате IE 8/9 fallback-вате към решението от предния урок.

Виждате как, чрез една правилна основа можем да постигнем страхотни резултати.

„При мене на IE 8/9/10 не върви!“

Тествайки на тези браузъри директно в момента има малък проблем. IE „пропада“ към IE7 compatibility behavior, защото HTML5 Doctype-а не му се нрави. За да предотвратим това пропадане можем просто да добавим следния мета таг:

<meta http-equiv="x-ua-compatible" content="IE=edge" />

Така вече проблеми остават единствено при IE7, чието решение ще опиша в отделен урок.

Demo на сегашното състояние можете да видите тук.

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

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

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