Logotyp för Björns studiewebb

Exempel: Öppna länk i nytt fönster

Denna webbsida visar på hur man, med JavaScript, "automatiskt" kan öppna länkens sida i ett nytt fönster (nåja, lösning 2 nedan i.a.f. :-).

Problem

I XHTML så har attributet target tagits bort i länkar, d.v.s. i taggen <a>. Därmed är det inte längre möjligt att m.h.a. länken öppna ett nytt fönster om man vill att XHTML-dokument ska innehålla korrekt XHTML-kod.

Koden nedan är alltså inte längre giltig i XHTML 1.0 (Strict).

<a href="https://www.kiltedviking.net/" target="_blank">Öppna</a>

Lösning(ar)

Lösningar bygger på principen graceful degradation, d.v.s. att om besökares webbläsare stödjer JavaScript, och besökare aktiverat JavaScript, så får besökaren ett mer interaktivt besök. Men om JavaScript inte fungerar, eller är aktiverat, i besökares webbläsare så fungerar ändå webbsidan (om än något mindre upplevelserikt).

Lösning 1

En lösning är att använda JavaScript i attributet onclick i taggen <a>, d.v.s. för att öppna fönster och sen avbryta klickhändelsen i länken. Nedan visas ett exempel med JavaScript-koden och sen länken som ska öppnas i nytt fönster.

Som parametrar till metoden window.open() skickas tre parametrar:

<script type="text/javascript">
function oppna(url)
{
  window.open(url, "fonsternamn",
    "scrollbars,resizable,width=830,height=400");
  return false; //Avbryt a-taggens öppnande av webbsida
}
</script>

<a href="https://www.kiltedviking.net"
  onclick="oppna(this.href)">Öppna</a>

Nedan är en länk som demonstrerar funktionen i koden ovan.

Öppna

Lösning 2

Men en snyggare lösning är antagligen att använda en klass i länkens attribut class.

(Lösningen är längre men ger, om den används i flera sidor, mindre kod i längden. Jag använder t.ex. denna lösning för alla länkar, som ska öppnas i nytt fönster, genom att lägga till två rader plus attributet class i alla länkar som ska öppnas i nytt fönster.)

Lösningen består av tre steg - de två fösta som görs en gång och det sista som görs i alla sidor med länkar som ska öppnas i nytt fönster:

Steg 1 - addLoadEvent.js

Denna fil innehåller en funktion för att koppla (ytterligare) en funktion till webbsidans laddningshändelse ("OnLoad"). (Se referenser för en fullständig beskrivning av funktionen.)

Skapa en fil addLoadEvent.js och fyll i koden nedan.

function addLoadEvent(func)
{
  var oldonload = window.onload;
  if (typeof window.onload != 'function')
  {
    window.onload = func;
  }
  else
  {
    window.onload = function()
    {
      oldonload();
      func();
    }
  }
}

Steg 2 - webbplats.js

Denna fil kommer innehålla alla funktioner (utom den i fil ovan) som behövs för lösning.

Namnet på denna fil kan vara vad som helst - i mitt fall heter den t.ex. kiltedviking.js och i den har jag placerat all JavaScript-kod som ska vara tillgänglig i alla webbplatsens sidor.

Skapa en fil med namnet webbplats.js (eller vad du vill, så länge den slutar på .js - anpassa då även namnet i steg 3 :-) och fyll i kod nedan. Ändra eventuellt text som ska läggas till efter länk samt namnet på klass (markerade med röd text i kod nedan) som ska användas för länkar som ska öppnas i nytt fönster.

I koden anropas först funktionen, i fil ovan, för att lägga till funktioner som ska anropas när sida laddas - i detta fall funktionen nedanför. Därefter deklareras variabler för text som ska läggas till efter länk samt namn på klass som ska användas för att avgöra om länk ska öppnas i nytt fönster. Sen hämtas alla länkar i dokument samt ett objekt för regulära uttryck (eng. regular expression).

I nästa steg så loopas det över alla länkar och om en länk är markerad med klass (för externa länkar) så läggs ett em-element till sist i länken samt funktion för att öppna nytt fönster kopplas till länkens klickhändelse (OnClick). Sist av allt så sätts variabel med em-element till null för att förstöra objektet och frigöra minne.

Sist i koden finns funktionen som ska anropas när besökare klickar på länk som ska öppnas i nytt fönster.

//Koppla metod nedan till laddning av sida
addLoadEvent(setupExternalLinks);

function setupExternalLinks()
{
  var strNewWindowAlert = " >>"; //Text att lägga till efter länk
  var strNewWindowClass = "externallink"; //Klass som ska ändras
  var objWarningText;
  var strWarningText;
  var link;
  // Hitta alla länkar i sida
  var links = document.getElementsByTagName('a');
  var pattern = new RegExp(strNewWindowClass);

  for (var i = 0; i < links.length; i++)
  {
    link = links[i];
    if (link.className.match(pattern))
    {
      // Skapa ett em-element att infoga efter länk
      objWarningText = document.createElement("em");
      strWarningText = document.createTextNode(strNewWindowAlert);
      objWarningText.appendChild(strWarningText);
      link.appendChild(objWarningText);
      link.onclick = openInNewWindow;
    }
  }

  objWarningText = null;
}

function openInNewWindow()
{
  var newWindow =
    window.open(this.getAttribute('href'), 'externallinks');
  newWindow.focus();
  return false;
}

Steg 3 - länka in filer ovan + lätt till attributet class

Lägg till de två översta raderna i webbsidas tagg <head> - anpassa eventuellt namn på, och sökväg till, JavaScript-filer.

Lägg sen till attributet class i alla länkar som ska öppnas i nytt fönster. Ändra eventuellt namnet på klassen (markerat med röd text i exempel nedan) så att det matchar namn i metoden setupExternalLinks() i kod ovan.

<script type="text/javascript" src="addLoadEvent.js"></script>
<script type="text/javascript" src="webbplats.js"></script>

<a href="https://www.kiltedviking.net/"
  class="externallink">Öppna</a>

Länk som demonstrerar hur kod ovan fungerar. (Övriga länka på sida, som jag vill ska öppnas i nytt fönster, använder samma kod - t.ex. länkar i referenser.)

Öppna

Referenser

Lösning 1 ovan bygger på kod jag hittat på följande ställen:

Lösning 2 ovan bygger på kod jag hittat på följande ställen:

(Code in examples on this page are based on code found in references above. Thanks go out to authors of those materials!)

Till början på sida

Skapad av: Björn G. D. Persson. Uppdaterad: 2010-07-12.