HTMLAreaElement.target — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.target

Beschreibung

Die Eigenschaft target des HTMLAreaElement-Interfaces spiegelt das HTML-Attribut target eines <area>-Elements innerhalb einer Image-Map (<map>). Der String gibt an, wo die über href verknüpfte Ressource angezeigt werden soll, also in welchem Fenster, Tab oder <iframe>.

Gültige Werte sind die Schlüsselwörter _self (aktueller Kontext, Standard), _blank (neuer, unbenannter Kontext, meist ein neuer Tab), _parent (übergeordneter Kontext) und _top (oberster Kontext), außerdem ein beliebiger Name eines Browsing-Kontexts, z. B. der name eines <iframe>. Existiert kein Kontext mit diesem Namen, öffnet der Browser einen neuen Kontext unter diesem Namen.

Ist das Attribut nicht gesetzt, liefert die Eigenschaft einen leeren String. Das Verhalten entspricht dann _self, sofern kein <base target="…"> im Dokument etwas anderes vorgibt. Die Eigenschaft ist praktisch, wenn man Bereiche einer Image-Map dynamisch umkonfigurieren möchte, etwa damit externe Links in einem neuen Tab aufgehen oder die Inhalte in einem Vorschau-<iframe> landen.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: `_self`, `_blank`, `_parent`, `_top` oder der Name eines Browsing-Kontexts. Der Wert wird unverändert ins Attribut `target` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des target-Attributs bzw. ein leerer String, wenn das Attribut fehlt.

Beispiele

Ziel eines Bereichs auslesen

// <map name="karte">
//   <area id="nord" shape="rect" coords="0,0,100,50" href="/nord" target="_blank" alt="Nord">
//   <area id="sued" shape="rect" coords="0,50,100,100" href="/sued" alt="Süd">
// </map>
const nord = document.getElementById('nord');
const sued = document.getElementById('sued');
console.log(nord.target);
console.log(JSON.stringify(sued.target));

_blank ""

Externe Links automatisch in neuem Tab öffnen

document.querySelectorAll('map area[href]').forEach((area) => {
  const url = new URL(area.href, location.href);
  if (url.origin !== location.origin) {
    area.target = '_blank';
    // Schutz vor Tabnabbing
    area.rel = 'noopener noreferrer';
  }
});

Inhalte in einem benannten iframe anzeigen

// <iframe name="vorschau" src="about:blank"></iframe>
const areas = document.querySelectorAll('map[name="karte"] area');
for (const area of areas) {
  area.target = 'vorschau';
}
console.log(areas[0].getAttribute('target'));

vorschau

// Wichtig · Fallstricke

Sicherheit: Bei target="_blank" sollte zusätzlich rel="noopener" gesetzt werden, damit die geöffnete Seite nicht über window.opener auf das Ursprungsfenster zugreifen kann (Tabnabbing). Moderne Browser setzen noopener bei _blank zwar implizit, ältere aber nicht.
Ein leerer String bedeutet nicht zwingend _self: Ein <base target>-Element im Dokument legt den Standard fest.
Tippfehler wie _Blank oder blank (ohne Unterstrich) gelten als Name eines Kontexts. Alle Klicks landen dann im selben benannten Fenster statt jeweils in einem neuen.
Ohne href ist der Bereich kein Link, und target hat keine Wirkung.
Die Eigenschaft wird von allen gängigen Browsern unterstützt.

Siehe auch

Window.open() HTMLAreaElement.origin HTMLAreaElement.alt HTMLAreaElement.href HTMLAreaElement.port