Signatur
Beschreibung
Die Eigenschaft target spiegelt das HTML-Attribut target eines <a>-Elements wider. Sie ist ein String, der festlegt, wo die verlinkte Ressource angezeigt wird: im aktuellen Tab, in einem neuen Tab oder Fenster, im übergeordneten Frame oder in einem benannten Fenster bzw. <iframe>.
Gültige Werte sind die Schlüsselwörter
_self– aktueller Browsing-Kontext (Standardverhalten, wenn das Attribut fehlt),_blank– neuer, unbenannter Browsing-Kontext (meist ein neuer Tab),_parent– übergeordneter Browsing-Kontext (bei verschachtelten Frames),_top– oberster Browsing-Kontext (verlässt alle Frames),_unfencedTop– experimentell, für Fenced Frames,
oder ein beliebiger Name. Wenn es bereits ein Fenster oder einen <iframe> mit diesem Namen (name-Attribut) gibt, wird der Link dort geöffnet, sonst wird ein neuer Kontext mit diesem Namen angelegt.
Typische Anwendungsfälle sind, externe Links per Skript in neuen Tabs zu öffnen, Links gezielt in ein eingebettetes <iframe> zu laden oder das Verhalten abhängig vom Kontext (z. B. innerhalb eines Frames) anzupassen. Wenn das Attribut fehlt, liefert die Eigenschaft einen leeren String "". Beim Schreiben wird das HTML-Attribut direkt geändert.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: Schlüsselwort (_self, _blank, _parent, _top) oder Name eines Browsing-Kontexts. Wird unverändert ins Attribut target geschrieben. |
Rückgabewert
target-Attributs bzw. "", wenn keins gesetzt ist. Der tatsächlich wirksame Standard ist dann _self, sofern kein <base target> etwas anderes festlegt.Beispiele
Wert auslesen und setzen
// <a id="doku" href="https://developer.mozilla.org/">MDN</a>
const link = document.getElementById('doku');
console.log(JSON.stringify(link.target)); // Attribut fehlt
link.target = '_blank';
console.log(link.target);
console.log(link.getAttribute('target'));Alle externen Links sicher in neuem Tab öffnen
const externalLinks = [...document.querySelectorAll('a[href]')]
.filter((a) => a.hostname && a.hostname !== location.hostname);
for (const a of externalLinks) {
a.target = '_blank';
// Schutz vor Tabnabbing und Referrer-Weitergabe
a.relList.add('noopener', 'noreferrer');
}
console.log(`${externalLinks.length} externe Links angepasst`);Links in ein benanntes iframe laden
// <iframe name="vorschau" src="about:blank"></iframe>
// <nav id="menu"><a href="/seite-a.html">A</a><a href="/seite-b.html">B</a></nav>
const menuLinks = document.querySelectorAll('#menu a');
menuLinks.forEach((a) => {
a.target = 'vorschau'; // entspricht dem name-Attribut des iframes
});
console.log([...menuLinks].map((a) => a.target));Aus einem Frame ausbrechen
// Wenn die Seite in einem Frame läuft, sollen Links das ganze Fenster ersetzen
if (window.self !== window.top) {
document.querySelectorAll('a').forEach((a) => {
if (!a.target) a.target = '_top';
});
}// Wichtig · Fallstricke
Sicherheit (Tabnabbing): Bei target="_blank" konnte die geöffnete Seite früher über window.opener auf die Ursprungsseite zugreifen und sie z. B. auf eine Phishing-Seite umleiten. Aktuelle Browser setzen bei _blank-Links auf <a> automatisch noopener. Trotzdem sollte man rel="noopener noreferrer" (bzw. relList.add(...)) ausdrücklich setzen, damit ältere Browser geschützt sind und die Absicht im Code erkennbar ist.
Leerer String: Ohne Attribut liefert die Eigenschaft "", nicht "_self". Ein <base target="…"> im Dokumentkopf beeinflusst das tatsächliche Verhalten, der Wert von a.target ändert sich dadurch aber nicht.
Schlüsselwörter: Sie werden ohne Beachtung der Groß-/Kleinschreibung ausgewertet (_BLANK wirkt wie _blank). Unbekannte Werte mit Unterstrich (z. B. _new) gelten nicht als Schlüsselwort, sondern werden als Fenstername behandelt. Das führt oft zu dem Fehler, dass alle Links in denselben zweiten Tab laden.
Barrierefreiheit: Neue Tabs ohne Vorwarnung können Nutzer verwirren. Weise sichtbar oder per Screenreader-Text darauf hin.
Wird von allen Browsern unterstützt. _unfencedTop ist experimentell und nur in Chromium verfügbar.