Külső linkek XHTML fájlokban

Az XHTML-ből a W3 Consortium eltávolította a target tulajdonságot, így a linkek nem mutathatnak új, üres ablakra (_blank). Ebben a leírásban egy módszert mutatok be ennek pótlására.

Az XHTML bevezetett egy új tulajdonságot, a rel-t, amely a tartalom és a href tulajdonságban megadott erőforrás közti kapcsolatot (relationship) hivatott megadni. Az XHTML 2.0-ban megtalálható rel tulajdonságok és néhány egyéb meta információra vonatkozó attribútum listáját itt megtalálhatjuk.

Tehát van egy viszonylag szabadon felhasználható tulajdonságunk. Hogy lesz ebből külső link? Egy új kapcsolatot adunk meg: external (külső). Sajnos a böngésző nem nagyon tudja, hogy mit kezdjen ezzel, úgyhogy egy kis JavaScript kódra is szükségünk lesz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript">
function createExternalLinks()
    {
    linksArray = document.getElementsByTagName('a');
    for(var i = 0; i < linksArray.length; i++)
        {
        if(linksArray[i].getAttribute('rel') == 'external')
             {
             linksArray[i].onclick = new Function("window.open('" + linksArray[i].href + "');");
             linksArray[i].className = "external";
             linksArray[i].id = "autoId" + i;
             linksArray[i].href = "#autoId" + i;
             }
        }
    }
window.onload = createExternalLinks;
</script>

Ezt a kódot bármilyen oldalba beszúrva automatikus elindul betöltődéskor, és végrehajtja a szükséges változásokat: az összes anchor (a) elemet végignézi, hogy a rel tulajdonsága external-e, és amennyiben igen megváltoztatja a linket: az onclick eseményre egy új funkciót vezet be, az elem class tulajdonságát lecseréli external-ra, létrehoz neki egy automatikus ID-t, és a href tulajdonságot beállítja, hogy a főablak változatlan maradjon.

Természetesen a script tagokat eltávolítva és egy külső fájlba elmentve több fájlba is linkelhetjük a scriptet.

A class tulajdonság lecseréléséről: a W3C a target tulajdonságot azért szüntette meg, mert inkább a felhasználóra bízná annak eldöntését, hogy hova kívánja megnyitni az oldalt. Éppen ezért illik megjelölni a szokásostól eltérő működésű linkeket, amire a CSS egy tökéletes megoldás. Egy kis képpel, esetleg más színnel megjelölhetjük olvasóinknak a külső linkeket. Utóbbira egy példa:

1
2
3
4
5
6
7
8
9

a.external:link,
a.external:hover,
a.external:active,
a.external:visited
    {
    display: block;
    background: url('external.png'') no-repeat right;
    padding-right: 15px;
    }

Ezzel máris elértük, hogy mint például a WikiPediában a külső linkeket egy kis ikon jelzi.

Természetesen ezzel a megoldással kapcsolatban egy teljesen jogos kérdés is felmerül: a W3C valószínűleg okkal szüntette meg a target tulajdonságot, akkor miért harcolunk a szabvány ellen ilyen megoldásokkal? A válasz egyszerű: lehetnek olyan oldalak (pl. egy linkgyűjtemény), ahol ez a felhasználók számára nem bosszúságot okoz, inkább kis kedvesség, hogy nem kell kettőt klikkelniük, hogy új ablakokba nyissanak meg egy-egy linket.