Skryptozakładki: Walidacja strony

Skryptozakładki są w pewnym sensie mini-aplikacjami, napisanymi w JavaScripcie, które umieszczone w adresie zakładki, rozszerzają możliwości naszej przeglądarki. Taka aplikacja uruchamiana jest w momencie wybrania odpowiedniej zakładki i działa, co najważniejsze, tylko w kontekście oglądanej strony. Dzięki skryptozakładkom możemy m.in.:

  • Działać na zaznaczonym tekście (np. wysłać go do przeglądarki)
  • Edytować wygląd strony (np. zmienić tło, wyróżnić linki)
  • Zwalidować oglądaną stronę – Tym dziś się zajmiemy

Budowa skryptozakładki

Najprostszą funkcją jaką może realizować skryptozakładka jest wyświetlenie prostego komunikatu, np. "Hello World"

javascript: alert('Hello World');

Całość składa się z dwóch części: pierwsza to napis javascript:, po nim następuje właściwa część, czyli nasz kod wykonujący określone zadanie. Aby uruchomić skryptozakładkę wystarczy wkleić powyższy przykład w polu adresu nowej zakładki i ją uruchomić. Naszym oczom powinien ukazać się napis Hello World.

Chcąc wykonać jakieś bardziej skomplikowane zadania, możemy nasz kod opakować w samowywołującą się funkcję anonimową. Nasz powyższy przykład wyglądał by tak:

javascript:(function(){ alert('Hello World')})();

Zaletą takiego rozwiązania jest osobna przestrzeń nazw dla zmiennych użytych w skryptozakładce, dzięki czemu nie nadpiszemy żadnych zmiennych użytych przez autora strony.

Na koniec warto jeszcze wspomnieć o drobnym szczególe. Kod, który masz zamiar umieścić w zakładce, musi być skompresowany do jednej linijki.

Ładowanie zewnętrznych skryptów

Aby rozszerzyć możliwości skryptozakładki, możemy dołączyć do dokumentu różnego rodzaju skrypty zewnętrzne, takie jak np biblioteka jQuery. Poniżej zamieszczam przykładowy kod funkcji ładującej jQuery, tylko w przypadku gdy nie zrobił tego twórca oglądanej strony.

javascript:(function(){
	if(!window.jQuery){
		script = document.createElement("script");
		script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
		script.onload = jakasFunkcja;
		document.body.appendChild(script);
	}else{
                jakasFunkcja();
        }
	
	function jakasFunkcja(){
		alert('test');
	}
})()

Walidowanie oglądanej strony

Czas na „żywy” przykład działania skryptozakładki. Naszym celem dzisiaj będzie stworzenie skryptu, który prześle do walidacji oglądaną stronę.

Pierwszym pomysłem na rozwiązanie tego problemu, jest użycie obiektu location. Nasz kod będzie wyglądał tak:

javascript:(function(){
	window.location = "http://validator.w3.org/check?uri="+window.location.href+"&charset=%28detect+automatically%29&doctype=Inline&group=0";
})();

Wadą takiego rozwiązania jest to, że strona z wynikiem walidacji zostanie załadowana w tej samej karcie, zastępując dotychczas oglądaną stronę. Poszukajmy więc innej drogi. Z pomocą przychodzi nam funkcja open()

javascript:(function(){
	open("http://validator.w3.org/check?uri="+window.location.href+"&charset=%28detect+automatically%29&doctype=Inline&group=0");
})();

Wszystko działa jak należy, i w sumie mógłbym zakończyć dzisiejszy wpis. Pozostaje jednak jeszcze trzecia możliwość, dzięki której, walidacja nie musi odbywać się na osobnej karcie, a w tej samej co oglądana strona, wcale jej nie zastępując. Po niżej przedstawiam rozwiązanie, którego sam używam:

javascript:(function(){
	if(!window.jQuery){
         	script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
		script.onload = waliduj;
		document.body.appendChild(script);
	}else{
		waliduj();
	}
	
	function waliduj(){
		$("body").append('<div id="walidateFrameTable">
			<div>
				<div>
					<iframe src="http://validator.w3.org/check?uri='+window.location.href+'&charset=%28detect+automatically%29&doctype=Inline&group=0" frameborder="0" width="960" height="500"></iframe>
				</div>
			</div>
		</div>
		<style type="text/css">
			#walidateFrameTable{
				display: table;
				background: rgba(0,0,0,.5);
				position: fixed;
				top: 0; left: 0;
				width: 100%; height: 100%;
				z-index: 1000;
			}
			#walidateFrameTable > div{
				display: table-cell;
				vertical-align: middle;
			}
				
			#walidateFrameTable > div > div{
				background: white;
				width: 960px;
				padding: 10px;
				border-radius: 5px;
				margin: 0 auto;
			}
		</style>');
		$("#walidateFrameTable").click(function(){$(this).remove()});
	}
})();

Jak to działa? Na początku ładowana jest biblioteka jQuery, oczywiście tylko jeżeli wcześniej nie zrobił tego autor strony. Następnie tworzone jest nowe okienko ala lightbox, w którym umieszczony jest iframe z załadowaną stroną walidatora. Na koniec dodaje jeszcze obsługę zdarzenia click dla ciemnego tła, tak by można było wszystko wyłączyć.

Podsumowanie

Jak widać skryptozakładki są ciekawym sposobem na rozszerzenie możliwości przeglądarki, a ich budowa jest na tyle prosta, że każdy kto zna JavaScript, powinien sobie bez problemu poradzić.