Linkeljünk JavaScript-tel

Sztanahov írt róla, hogy megjelenőben van egy újabb linkelési formátum, ahol a href="" tulajdonságba nem egy statikus címet írunk, hanem egy JavaScript funkciót. Valahogy így:

<a href="javascript:showLink('abc123');">ez egy link</a>

Ezzel igazából egy probléma van: nem biztos, hogy az adott böngésző rendelkezik JavaScript-tel, de ha rendelkezik is, nem biztos, hogy minden böngésző egyformán kezeli. Viszont van erre egy rendkívül jó megoldás, ami a JavaScript hiányában, vagy hibás kód bevitelekor nem bántja az eredeti linket, valamint a link megnyitható új lapon is, nem úgy, mint egy szabványos JavaScript link.

Mindenképpen szükségünk lesz egy különálló fájlra, ahol a kódunkat tároljuk. Ezt az adott HTML oldalon meghívjuk, mondjuk a <head> részben, valahogy így:

<script language="javascript" type="text/javascript" src="kod.js" ></script>

Megjegyezném, hogy XHTML 1.1 esetében a language="" tulajdonság megadása nem szükséges.

Tehát, van egy kódunk, ami az oldal betöltésekor betöltődik. A kód annyit fog tenni, hogy bizonyos linkeknek a kattintáskor történő eseményét módosítja, de maga a hivatkozást nem módosítja. Ehhez egy saját függvényre, egy ciklusra, és a getElementsByTagName(); függvényre lesz szükségünk. A mi függvényünk, az oldal betöltésekor megkeresik az összes <a> elemet, és amelyikhez egy egyéni rel="" tulajdonság van rendelve, annak módosítja az onClick(); eseményét. A ciklusra értelemszerűen azért lesz szükség, mert több elem is lehet egy oldalon. Én a mostani kódnál a rel="jslink" tulajdonságot fogom alkalmazni.


function setLinks()
{
  var aTagek = document.getElementsByTagName("a"); // az aTagek változó lesz az a tömb, ami az összes <a> elemet foglalja magába
  for(var i = 0; i < aTagek.length; i++ ){
    if(aTagek[i].getAttribute("rel") == "jslink" && (aTagek[i].getAttribute("href"))){ // itt történik az ellenőrzés, hogy van-e megadva href és rel tulajdonság, illetve utóbbinak értéke "jslink"-e
    tagA[i].onclick = function () { showLink(this); } // a showLink(); természetesen bármi más lehet, amire szükségünk van, akár egy egyéni függvény is
    }
  }
}

Ezen kívül szükség lesz még egy apró módosításra a HTML fájlban, mégpedig ez a saját függvényünk meghívása lesz.

<body onload="setLinks();">

Ezzel tulajdonképpen készen is volnánk, az oldal betöltésekor betöltődik a fájlunk, és az általam setLinks(); elnevezést kapó függvény végrehajtódik, ami az összes rel="jslink" tulajdonságú hivatkozás kattintáskor való eseményét módosítja.

Gábor hívta föl a figyelmemet, hogy a <body> elemnek megadott onLoad="" esemény kerülendő, ezért célszerű inkább a kód utolsó sorába ezt az apróságot beszúrni: window.onload = setLinks;, vagy a hozzászólásban említett módszert használni.

« »

mefiblog logó

Írja és rendezi Mefi, avagy Nádai Gábor © 2005-2024

A blogot büszkén pörgeti a WordPress motorja, Anders Norén sablonjának átbuherált változatával.