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/

13 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. Laurie

    2010-10-30 09.05.59

    Great Stuff!

    On one of my Ajax sites, I use meta refresh to update data for non-js browsers. For js-enabled browsers I needed a way to turn off the meta refresh as data is updated the Ajax way.

    Finally after hours of googling (and a couple of beers), I found your solution.

    I changed line 5 to make my validator happy.
    document.write(‘/*’);

    Thanks again.

  7. Laurie

    2010-10-30 09.09.20

    Looks like my code change got clobbered.

    I had to add type equals text slash javascript to the second opening script tag.

    Cheers

  8. seobaglyak

    2011-04-09 15.24.22

    Köszi! Ez igy valóban működik…

  9. Landry Adkins

    2011-06-09 15.01.48

    I’m extremely inspired with your writing skills and even with the layout on your own weblog. Is this a paid subject matter or did anyone customize it on your own? Either way keep up to date the nice top quality writing, it’s rare to peer a nice weblog like that one nowadays..

  10. Ken Irwin

    2011-06-17 20.58.35

    This is brilliant! I would like to mention this code in an article I’m writing and I would like to be able to give you credit appropriately. I don’t see you name on the website anywhere?

    Would you please reply (either by email or here in the comments) to let me know how I can give you credit?

    Many thanks for this wonderful solution. I’m afraid I’ve been using illegal noscript tags to achieve this effect before!

  11. Petike

    2011-06-30 13.32.35

    Some validators and robots detect with this script the webpage is redirected…
    This cause SEO problems… :( (

  12. home loan with bad credit

    2013-03-09 06.42.15

    Hi there, just changed state aware of your websites using Research, determined that it is truly insightful.

  13. Misty Blast zone

    2013-05-02 21.55.32

    You really ensure it is appear really easy along
    with your presentation but I find this matter
    for being actually something which I believe I
    would never understand. It seems too complicated and very extensive i believe.

    I’m looking ahead for the subsequent post, I am going to attempt to obtain the hold from this!


WEB2.0 trükkök

Bejelentkezés

Elfelejtett jelszó?