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.

Задаване на state

Казваме на 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 на сегашното състояние можете да видите тук.