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.
Gábor
2006. május 05. — 13:07:08
A body attributumakent atadott onload megoldas kerulendo, javasolt helyette a diszkret addEvent(window, “load”, setLinks) megoldas inkabb.
Shamalt
2006. május 05. — 13:12:45
ld a kommentem sztahanovnal 🙂
csaba
2006. május 05. — 13:30:46
Ennek a megoldásnak mi az előnye a hagyományos mosóporral szemben?
Shamalt
2006. május 05. — 14:07:38
[re=8661]mefi[/re]: ertsd jol, en nem javascript-, hanem felesleges javascript hasznalat-ellenes vagyok 😉
Bártházi András
2006. május 05. — 14:54:59
Sztahanov által említett módszer nyilván alapvetően káros. A fenti módszer úgy gondolom, hogy igazából teljesen másról szól, és így akár hasznos is lehet – például ha egy hagyományos linket használva egy adott div-be szeretnél betölteni egy új HTML részletet. A sportklub.tv-n én most hasonlóan oldottam meg a TV műsor lapozóját. Ez azért lehet jó, mert akiknek nincsen JS-e, azok is meg tudják nézni a műsort, igaz, nem túl szépen.
Gábor
2006. május 05. — 18:15:30
Nem teljesen jó így, direkt nem úgy írtam. Diszkrétebb, de amennyire én tudom, nem kezelik egységesen a böngészők azt a sémát. Mellékelném a számos projekt által alkalmazott, eredetileg [url=http://simon.incutio.com/]Simon Willisontól[/url] származó kis snippetet:
[code]
function addEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != ‘function’){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
[/code]
balti
2006. május 05. — 19:21:42
1.) Nekem is az jutott eszembe, hogy minek ez a javascript mizéria, amíg nem olvastam a hozzászólásokat. Valóban, például ha azt akarod, hogy adott linkeknél teszem azt azt szeretnéd, hogy a link képe lassan elhalványodjon kattintásra, jól jöhet egy olyan megoldás, ami nem zárja ki a javascript-től tartózkodó felhasználókat. Szóval biztos lehet használni valami hasznos vagy haszontalan dologra.
2.) Ahogy Gábor írta, a html kód végébe hozzáírt window.onload nem diszkrét szemléletű. Nincs külön a javascript és a html kód. Hogy miért nem említette meg a cikkét András? http://weblabor.hu/cikkek/diszkretjavascript
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}else if (obj.attachEvent){
return obj.attachEvent(“on”+evType, fn);
}
return false;
}
Levente
2006. május 05. — 20:01:50
Inkább tilos. Egyébként nem XHTML 1.1-nél se szükséges.
Maat
2006. május 05. — 20:23:05
peldaul ez is egy “szep” pelda 🙂 http://thedailywtf.com/forums/70666/ShowPost.aspx
monghuz
2006. május 06. — 15:23:53
lehet hogy kicsit OFF, de nem tudjátok hogy hogy oldható meg JS-ben, hogy ha kattintok egy linkre akkor ne hajtódjon végre..
pl van ez a link:
a hasonló módon mint ami a cikkben van a JS megtalálja a linket és betölti egy div-be. a prototype ajax.update osztály segítégével, a gond az hogy miután betöltötte a div-be a cuccot a böngészőben a valami.php-t nyitja meg…
amit eddig próbáltam az a return(false); volt a függvény utolsó sorában, de ezzel sem jutottam közelebb az igazsághoz 🙁
monghuz
2006. május 06. — 18:47:06
[re=8739]mefi[/re]:
most láttam hogy te is használsz “e-mail védelmet”
javaslom próbáld ki az alábbi dolgot, én a weblaboron találtam és használom is.. 😛
annyit kell tenni, hogy a függvény fusson le a lap betöltödésekor..
[code]function whatCorrector() {
var replaces = 0;
var alltags = document.all ? document.all.tags(“A”) : document.getElementsByTagName(“*”);
for (i=0; i < alltags.length; i++) { if (alltags[i].className == 'whateffect') { while (alltags[i].innerHTML.indexOf('#|'+'KUKAC|#') != -1 && replaces < 10000) { alltags[i].innerHTML = alltags[i].innerHTML.replace('#|'+'KUKAC|#', String.fromCharCode(64)); replaces++; } } } }[/code] u.i: átírtam az általad használt formátumot 😉
Levente
2006. május 11. — 19:29:08
Tény, hogy XHTML 1.1 kivételével valid a language attribútum, de mi értelme megadni?
bit
2006. május 29. — 05:42:30
nem értem hogy ez miért új. 🙂
n2k
2006. június 22. — 12:40:24
és ez miért jobb, mint a direkt linkelés?
Mefi
2006. július 22. — 12:27:48
[re=8657]Gábor[/re]: módosítottam, köszi.
[re=8658]Shamalt[/re]: igazad van, de azért a JavaScript-tel jóságokat lehet ám készíteni. Gondolok például a GMail-re, vagy a Google Calendarra.
[re=8659]csaba[/re]: ez akkor jó, ha valamilyen js műveletet szeretnél végrehajtatni kattintáskor, de nem szeretnéd, hogy a js nélküli böngészők ne ütközzenek bele.
Mefi
2006. július 22. — 12:27:48
[re=8666]Shamalt[/re]: okok, értem. 🙂
[re=8668]Dani[/re]: mondjuk ha valaki YACA-t, vagy HaloScan-t használ, annak például jó lehet.:)
Mefi
2006. július 22. — 12:27:48
[re=8687]Gábor[/re]: igen, ezzel valahol (talán a LightBox kódjában) találkoztam már. Kiegészítettem ezzel a hivatkozással az írást, köszi megint. 🙂
[re=8690]Levente[/re]: igen, tudom, hogy nem lehet megadni, a validátor is kiakad tőle.
[re=8693]Maat[/re]: Sztahanov is ezt a linket említi a fentebb jelölt bejegyzésénél, de ez mindenképpen rossz módszer.
Mefi
2006. július 22. — 12:27:48
Szerintem ezzel a módszerrel, és egy általad is említett return:false; megoldással működőképes lenne.
Mefi
2006. július 22. — 12:27:48
Igen, ezt a módszert ismerem, de megmondom őszintén, hogy nem foglalkoztat – a GMailnek tökéletes a spamszűrője. 🙂
Mefi
2006. július 22. — 12:27:48
Még régebben olvastam valamit, hogy az Internet Explorer nem kezeli rendesen – nem tudom, hogy ebből mi igaz.
Mefi
2006. július 22. — 12:27:48
Az új az mint ironikus, ráadásul rossz linkelési formula, ez inkább arra való, hogy JS-sel linkeljünk, de azok, akiknek nincs JS, szinténtudjanak kattintani.