Amit el szeretnénk érni

• Szeretnénk elérni, hogy a böngésző kikapcsolt JavaScript esetén ugorjon egy hibaoldalra vagy az oldal JavaScript nélküli statikus változatára.
• Szeretnénk megtartani az XHTML kompatibilitást
• Működjön minden elterjedt böngészőn (Mozilla Firefox, Internet Explorer 6-7-8, Opera, Safari, Google Chrome)

Az itt közölt megoldást nem láttam még publikálva sehol, saját ötlet. Kicsit hackelős, de működik

A megoldáshoz vezető út

Ahhoz, hogy JS nélkül tudjunk ugrani az alábbi meta taget lehet használni:

<meta http-equiv="refresh" content="0; url=nojs.html" />

A fenti sort a headerbe helyezve az oldal azonnal a nojs.html-re ugrik. Ha van JS, ha nincs.

Kézenfekvő lenne, hogy ha van JavaScriptünk, kitöröljük a DOM-ból a fenti sort és kész. De sajnos ez nem működik, mert a böngésző a meta tageket betöltéskor feldolgozza és hiába töröljük a taget, ő akkor is ugrik…

Másik kézenfekvő megoldás, hogy a fenti sort <noscript></noscript> tagek közé helyezzük. A baj ezzel csak az, hogy ez nem szerepelhet a szabvány szerint a headerben, amúgy működne (nem vagyok benne biztos, hogy minden böngészőben). De a feltételeinkben benne volt, hogy az XHTML szabványt be kell tartanunk (legalábbis a validátor szerint).

A megoldás

Először álljon itt a kód, később részletesen elmagyarázom:

<!-- *** Javascript Detect Hack *** -->
<script type="text/javascript"><!--
document.write("<\/script><script>/*");
//--></script>
<meta http-equiv="refresh" content="0; url=nojs.html" />
<script type="text/javascript">/* */</script>
<!-- ********* End of hack ******** -->

A működése nagyvonalakban: Ha van JavaScript, akkor a <meta> tag előtti script rész kommentbe teszi a <meta> taget, vagyis nem fut le. Ha nincs, akkor ugrik.

Soronként (a kezdő és a vég komment nélkül):

1. A script blokk kezdete. Ha van JavaScript, akkor lefut. A “<!–” HTML komment az elején azért kell, mert a script tartalmaz “<”, “>” jeleket, amit a validátor hibásnak jelezne, továbbá a <script>-et nem ismerő böngészők (vagy amikben ki van kapcsolva) így kihagyják ezt a részt.
2. Itt a dokumentumba beírjuk a <script> blokk lezárását, majd rögtön nyitunk is egy újat, amibe egy JS blokkomment nyitását is elhelyeztük. Ezzel kommentezzük ki a <meta>-t.
3. Ez zárja le a validátornak a <script> taget. Csak azért kell, hogy a validátor örüljön. Ha lefut a fenti kód, akkor ez kommentben lesz, tehát hatástalan.
4. Ez ugrik, ha nincs JS a nojs.html-re. A nojs.html bármilyen URL-re cserélhető. Ha van JS, akkor ez ugyanúgy a JS blokkomment része, tehát nem foglalkozik vele a böngésző.
5. Ez szintén a validátornak szóló rész. Ha van js, akkor a nyitó <script> tag a komment része, nincs hatása. A /* még mindig a kommentben van, ez is csak a validátor miatt van, ami azt hiszi, hogy egy új JS részben jár. Egészen a */-ig tart a blokkomment.  A </script> pedig lezárja a scriptből megnyitott scriptblokkunkat.

A lényeg, hogy két szinten megy a dolog és mind a két szinten helyes. Az egyik, amikor van JavaScript és dinamikusan változtatjuk a kódot, a másik, amikor nincs, és eleve XHTML szabvány szerinti a kód.

További probléma

Sajnos van módszer arra, hogy a meta refresh-t is kikapcsolja a felhasználó. Abban az esetben a fenti kód nem működik. Szerencsére ez elég ritkán fordul elő, egy átlagos felhasználó nem tesz ilyet.

Példa

Az alábbi url-re tettem egy példát, ahol működés közben lehet megnézni a kódot: http://web2.bitbaro.hu/jshack/