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):

  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/

7 hozzászólás a(z) “JavaScript detektálás, ugrás ha nincs JS + W3C valid” bejegyzésre

  1. Lia

    2009-08-04 15.18.38

    This 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

  2. Wedge

    2009-08-04 16.07.48

    Hi Lia,

    I updated the article with a working example. You can see that is a valid XHTML 1.0 Strict, like your site.

  3. lacika

    2009-08-27 19.50.34

    negyedik pr

  4. man and van

    2009-10-16 23.58.31

    great i dont understand it but it seem to be from web pages optimization

  5. Paul Morris

    2009-10-17 19.49.31

    Thanks for this. Exactly what I was looking for on my drupal site.

  6. man and van

    2010-02-22 09.23.25

    man and van great stuff this really helped me

  7. cheap ugg

    2010-03-01 08.02.29

    Your article is really exciting, I like it, I hope you can be properly update your zoom.


Itt lehet hozzászólni !


WEB2.0 trükkök

Bejelentkezés

Elfelejtett jelszó?

Regisztráció a honlapra