Signatur
Beschreibung
Die Eigenschaft href eines HTMLAreaElement steht für das Ziel eines klickbaren Bereichs innerhalb einer Imagemap (<map>). Beim Lesen erhält man immer die vollständig aufgelöste, absolute URL, auch wenn im HTML-Attribut nur ein relativer Pfad wie kontakt.html steht. Als Grundlage dient die Basis-URL des Dokuments (bzw. ein vorhandenes <base>-Element).
Die Eigenschaft ist ein Stringifier: Wird das Element in einen String umgewandelt (z. B. mit String(area) oder in einem Template-Literal), kommt derselbe Wert wie bei area.href heraus. Beim Setzen wird das Attribut href im DOM aktualisiert. Damit ändert sich auch das Ziel des Bereichs.
HTMLAreaElement bindet das Mixin HTMLHyperlinkElementUtils ein. Neben href gibt es deshalb die URL-Bestandteile protocol, host, hostname, port, pathname, search, hash und origin. Genauso funktioniert es bei HTMLAnchorElement. Wenn man nur einen Teil der URL ändern möchte, sind diese Eigenschaften oft praktischer.
Typische Einsatzfälle: Ziele einer Imagemap dynamisch umschreiben (z. B. Tracking-Parameter anhängen, Sprachversion wechseln), Links prüfen oder protokollieren oder Bereiche ohne Ziel erkennen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert (beim Setzen) | string | Neue URL, absolut oder relativ. Relative Angaben werden gegen die Basis-URL des Dokuments aufgelöst. Es wird als Attribut href gespeichert. |
Rückgabewert
href, ist das Ergebnis ein leerer String "". Lässt sich der Wert nicht als URL parsen, wird der rohe Attributwert zurückgegeben.Beispiele
Aufgelöste URL auslesen
// HTML: <map name="karte"><area id="nord" shape="rect" coords="0,0,100,50" href="regionen/nord.html" alt="Nord"></map>
// Seite läuft unter https://example.com/karte/
const area = document.getElementById('nord');
console.log(area.getAttribute('href')); // roher Attributwert
console.log(area.href); // absolut aufgelöst
console.log(`${area}`); // Stringifier liefert dasselbeZiel dynamisch ändern
const area = document.querySelector('map[name="karte"] area[alt="Nord"]');
// Ziel je nach Sprache umschreiben
const lang = document.documentElement.lang || 'de';
area.href = `/${lang}/regionen/nord.html`;
console.log(area.getAttribute('href'));
console.log(area.href);Tracking-Parameter an alle Bereiche anhängen
const areas = document.querySelectorAll('map[name="karte"] area[href]');
for (const area of areas) {
const url = new URL(area.href);
url.searchParams.set('utm_source', 'imagemap');
area.href = url.href;
}
console.log([...areas].map((a) => a.href));Bereiche ohne Ziel finden
const ohneZiel = [...document.querySelectorAll('area')]
.filter((area) => area.href === '');
console.log(`${ohneZiel.length} Bereich(e) ohne href`);// Wichtig · Fallstricke
- Relativ oder absolut:
area.hrefliefert immer die aufgelöste URL. Den Originalwert aus dem Markup bekommt man mitarea.getAttribute('href'). - Fehlendes Attribut: Ohne
hrefgilt der Bereich nicht als Hyperlink und ist nicht fokussierbar. Die Eigenschaft liefert dann\"\". Setzt manarea.href = '', entsteht das Attribut mit leerem Wert. Beim Lesen erhält man dann die URL des Dokuments. Um den Link zu entfernen, nutzt manremoveAttribute('href'). - Sicherheit: Werte aus Benutzereingaben niemals ungeprüft zuweisen.
javascript:-URLs führen beim Klick Code aus (XSS). Deshalb das Protokoll vorher prüfen, z. B. mitnew URL(wert, location.href).protocolgegen eine Liste erlaubter Protokolle wiehttps:. Eine strikte CSP ohne'unsafe-inline'blockiertjavascript:-URLs zusätzlich. - Bei
target=\"_blank\"auf externe Zielerel=\"noopener\"setzen. Moderne Browser tun das inzwischen standardmäßig. - Kompatibilität: Wird von allen gängigen Browsern seit Langem unterstützt. Die zusätzlichen URL-Bestandteile wie
origingibt es erst in neueren Browserversionen; sehr alte Browser (z. B. der Internet Explorer) unterstützen sie nur teilweise.