Idag besvarade jag en fråga på det svenska drupalforumet. Frågan handlade om hur man kan se till att externa länkar i en meny alltid öppnas i ett nytt fönster. Det finns en modul för detta som heter External Links.

Problemet lämpar sig också väldigt bra för att lösas med jQuery. Det är ett finurligt verktyg som borde ingå i alla drupalutvecklares repertoirer, och som jag skrivit om tidigare.

Om du läst mitt förra blogginlägg om jQuery vet du vad som utmärker det: dess fokus på att söka igenom HTML-dokument med hjälp av CSS-selektorer. Vi kommer använda samma teknik för att lösa denna uppgift.

Denna lösning förutsätter att du inkluderar JavaScript på din Drupal-webbplats. Det enklaste sättet att göra det på är att inkludera det i ditt tema. Placera en fil med namnet script.js i den katalog där det tema som används ligger. Denna katalog ligger normalt i sites/default/themes/tematsnamn. Om filen redan finns lägger du helt enkelt till din egen JavaScript-kod i slutet av filen. För mer information, se denna artikel

Alla menyer i Drupal består i regel av listor av länkar. Detta är ett semantiskt korrekt sätt att skapa menyer på webbsidor. Dessa listor (UL-taggar) har klassen menu (såvida du inte förändrat dess theme-funktion i större utsträckning). Eftersom vi vill påverka hur länkar i dessa menyer fungerar börjar vi med att målsöka dem:

$('.menu a');

Denna korta rad returnerar alla länkar som ligger i ett element med klassen menu, normalt: <ul class="menu">. Skulle vi nöja oss här skulle vi få samtliga länkar, inte bara de som pekar på externa sidor. Vi måste alltså bli mer specifika. Genom att använda jQuery:s attributvärdes-selektor kan vi matcha på elementets attribut, i detta fall a-taggens href-attribut.

Om vi gör antagandet att den som skapade menyalternativen var noggrann och angav relativa sökvägar kan vi också dra slutsatsen att alla externa länkar börjar på “http://”. Om du skippar “http://” i en länk, t ex <a href="www.google.com">...</a> kommer webbläsaren anta att din länk är relativ till din webbplats och alltså en undersida. Testa får du se!

Det råkar faktiskt vara så att jQuery har en selektor för att hitta element med attribut som börjar med en viss sträng. Vår avsevärt förbättrade version ser alltså ut så här:

$(".menu a[href^='http://']");

Nu får vi enbart reda på vilka länkar i sidans menyer som pekar till externa sidor. Nästa steg blir att se till att dessa öppnas i ett nytt webbläsarfönster. För att göra detta återanvänder vi kod från den förra jQuery-artikeln:

$(".menu a[href^='http://']").click(function() {
  window.open(this.href);
  return false;
});

Koden ovan gör så att varje klick på länken resulterar i att ett nytt fönster öppnas och visar länkens adress, dvs dess href-attribut.

Fyra rader kod för en lösning som är väldigt felsäker och inte kräver att du ändrar något eller skapar nya menyer på din webbplats! Du måste hålla med mig om att jQuery är fantastiskt!

Finns det nackdelar? Ja, besökarens webbläsare måste stödja JavaScript. En överväldigande majoritet av webbläsarna idag gör det. Om webbläsaren inte stöder JavaScript kommer länkarna öppnas i samma fönster, i övrigt är allting sig likt.

Detta innebär att denna lilla funktion är en bonus som användare med JS-stöd får glädje av. Mer än så, den följer en viktig princip som kallas graceful degradation. Denna designprincip säger att när lösningar som ger extra, ej essentiell funktionalitet, inte fungerar ska avsaknaden av dem ske på ett smidigt sätt som inte påverkar essentiella funktioner. Vidare anser många att essentiella funktioner ska utformas på ett sådant sätt att de inte kräver icke-standardteknik för att fungera. Med det menar jag JavaScript, Flash, Silverlight, ActiveX och Shockwave. Detta är dock inte alltid genomförbart, det finns idag hela webbplatser som enbart är byggda i Flash.

JavaScript och jQuery är fantastiska verktyg för att förbättra webblösningar och öka användbarhet utan att det negativt påverkar användare som har äldre webbläsare eller arbetsgivare som inte tillåter att JavaScript-tolk körs. Som ett komplement till Drupal är jQuery ett mycket trevligt verktyg.