JavaScript detektálás, ugrás ha nincs JS + W3C valid
Sok ember – félve vírustól, a böngésző hibáitól, reklámoktól… – egyszerűen kikapcsolja a böngészők JavaScript funkcióját. Ez a mai weboldalak ill. webalkalmazások szempontjából elég rossz szokás, mert ilyenkor teljesen működésképtelenné válhat. A felhasználónak meg nem minden esetben jut eszébe, hogy a kikapcsolt JavaScript az oka, hanem inkább az oldal készítőjét okolja. Erre ad megoldást az alábbi módszer. A felhasználót átirányíthatjuk egy statikus oldalra, ahol elmagyarázhatjuk neki, hogy miért is rossz kikapcsolni a JavaScriptet
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):
- 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.
- 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.
- 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.
- 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ő.
- 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/
Lia
2009-08-04 15.18.38This is not *live* yet (although you can get to it, no testing server.. sigh). Anyway, thank you. I was banging my head trying to figure out how to get this to validate and get my no-javascript style in that I needed.
Eventually this will be http://www.creighton.edu.
Thanks!
Lia
Wedge
2009-08-04 16.07.48Hi Lia,
I updated the article with a working example. You can see that is a valid XHTML 1.0 Strict, like your site.
lacika
2009-08-27 19.50.34negyedik pr
man and van
2009-10-16 23.58.31great i dont understand it but it seem to be from web pages optimization
Paul Morris
2009-10-17 19.49.31Thanks for this. Exactly what I was looking for on my drupal site.
man and van
2010-02-22 09.23.25man and van great stuff this really helped me
cheap ugg
2010-03-01 08.02.29Your article is really exciting, I like it, I hope you can be properly update your zoom.