@codenerd på twitter Mit seneste tweet:

Javascript – Nyt vindue i XHTML Strict

Hvis man anvender XHTML Strict eller XHTML 1.1, er target="_blank" bandlyst. Dette betyder, at hvis man ønsker at overholde de meget idealistiske standarder, ja så kan man principielt ikke åbne et nyt vindue, da filosofien bl.a. er at det ikke er tilladt at "ødelægge" brugerens browserhistorik (lukkes det nye vindue, så kan man ikke komme tilbage til det). Med undtagelse af nogle idealistiske få, virker det dog stadig meget relevant at eksterne links skal åbne i et nyt vindue, ja man kan vel efterhånden sige det er blevet lidt af en uofficiel web-konvention at dette er tilfælde. Hvad skal man så gøre? Ja som jeg ser det har man tre valgmuligheder

  • Anvende XHTML transitional – hvor target="_blank" stadig er tilladt
  • Anvende target="_blank" lige gyldigt hvad, tvivler på der er nogen browsere der ikke fortolker det
  • Anvende JavaScript til at klare jobbet.

JavaScript løsningen (placeres i <head></head> )

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
    <!--//--><![CDATA[//><!--
        window.onload=function(){ //naar dokumentet loades
            var container=document.getElementById('container'); //erstat container med id'et paa det der omkredser dit site
            if(container) { //hvis elementet blev fundet
                var links=container.getElementsByTagName('a'); //find alle a tags i container
                for(var i=0;i<links.length;i++){ //gennemloeb resultat
                    if(links[i].getAttribute('rel')=='external') { //hvis rel=external
                        links[i].title+=' (Eksternt link)'; //tilfoej besked til title om at linket er eksternt
                        links[i].onclick=function(){ //naar der clickes paa det
                            window.open(this.href); //aaben vindue med linket
                            return false; //stop linket fra at reloade nuvaerende side
                        }
                    }
                }
            }
        }
    /*]]>*/-->
</script>

Ovenstående virker måske uoverskueligt, men princippet er simpelt, når siden loades – gennemsøger JavaScriptet dokumentet for links, og hvis et link findes med attributten rel="external" tilføjes en onclick til dette link, som åbner linkets href i et nyt vindue når der klikkes. Når du ønsker et link skal åbnes i et nyt vindue giver du det simpelthen attributten rel="external". Rel attributten er fuldt ud gyldig i XHTML strict, og angiver forholdet mellem dokumentet og linket. (nb. husk at ændre document.getElementById(‘container’) til hvad dit omkredsende DIV har som id)

Hvorfor så dette "omfangsrige" JavaScript i stedet for bare at se højt og flot på standarden? Tjae, der er jeg dig nok svar skyldig. Det handler nok for mange om at kunne se "This page is Valid XHTML Strict" på W3C, men samtidig tror jeg, at mange af dem som ikke ønsker links åbner i et nyt vindue, har slået javascript fra. Dermed bliver det en win-win situation for alle.

Skriv en kommentar

Krævede felter er markeret med *.

*