second gate studio blog

Autorem tego bloga jest zx. Na stronie zajmuję się szeroko pojętym user-experience i takoż pojętym designem. Piszę o technologii, pokazuję rzeczy zaprojektowane z wyczuciem, dbałością o szczegóły i szukam inspiracji w każdej możliwej dziedzinie. Kontakt.

Wpis dodany roku w kategoriach HTML, CSS, JS, Techblog i otagowany słowami: ajax, html, html5, internet explorer, javascript, Trackback.

AJAX, HTML5 i Internet Explorer < 9

Problem z IE w wersji mniejszej niż 9 jest taki, że kiedy pobieramy kod HTML5 z zewnętrznego źródła przez AJAX, silnik nie rozpoznaje nowych elementów. Nawet jeśli użyjemy html5shiv, którego zadaniem jest „nauczenie” IE, że takowe istnieją. Na szczęście z pomocą przychodzi nam biblioteka innershiv, która przeparsowuje kod i zwraca go w postaci zrozumiałej dla IE. Jej użycie samo w sobie może być mało wygodne, ale łącząc ją z jQuery jest już dużo przyjemniej.

Przede wszystkim trzeba dołączyć plik z kodem JavaScript widoczny tylko dla starszych wersji IE i samo innershiv.js. Proponowałbym wszystko wrzucić do jednego pliku – mniej połączeń do serwera.

<!--[if lt IE 9]>
	<script src="/files/ie.js"></script>
<![endif]-->

W nim samym korzystamy z fajnej funkcji w jQuery, czyli $.ajaxSetup w połączeniu z dataFilter, które jest wywoływane zanim zwrócone dane dostaną się do metody success, dzięki czemu możemy je odpowiednio przygotować przed wyświetleniem:

$.ajaxSetup({
	dataFilter: function(data, dataType){
		if(dataType == 'html'){
			return innerShiv(data, false);
		}
		else {
			return data;
		}
	}
});

Od tej pory wszystkie zwrócone w AJAX wartości będą parsowane przez innershiv, a Internet Explorer poradzi sobie z nimi bez problemu. Ważne jest tylko, żeby pamiętać, że zwrócone dane muszą być typu html, więc do zapytań AJAX proponuję na wszelki wypadek dodawać dataType: 'html'.