HTMLAreaElement.hostname — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.hostname

Beschreibung

Die Eigenschaft hostname des Interfaces HTMLAreaElement ist ein String mit dem Domain-Namen oder der IP-Adresse aus der URL im href-Attribut eines <area>-Elements. Anders als bei host ist die Portnummer nicht enthalten.

Die Eigenschaft gehört zu den URL-Zerlegungs-Eigenschaften, die HTMLAreaElement mit HTMLAnchorElement und dem URL-Interface gemeinsam hat. Damit lassen sich die Ziele einer Image-Map auswerten, ohne den href-String selbst zu parsen. So kann man zum Beispiel externe Links erkennen, markieren oder mit rel="noopener" ausstatten.

Wenn man die Eigenschaft setzt, ändert sich nur der Host-Teil der URL. Protokoll, Port, Pfad, Query und Fragment bleiben erhalten, und das href-Attribut wird automatisch aktualisiert. Relative URLs werden vorher gegen die Basis-URL des Dokuments aufgelöst.

Rückgabewert

Typ

string

Beschreibung

Der Hostname der aufgelösten URL, z. B. "example.com" oder "192.168.0.1". Internationale Domains werden in Punycode ausgegeben. Ist href nicht gesetzt oder ungültig, oder hat die URL keinen Host (z. B. mailto:), ist der Wert ein leerer String "".

Beispiele

Hostname einer Image-Map-Fläche auslesen

// <map name="karte"><area id="nord" shape="rect" coords="0,0,100,100" href="https://shop.example.com:8080/produkte?id=7"></map>
const area = document.getElementById('nord');
console.log(area.hostname);
console.log(area.host);

shop.example.com shop.example.com:8080

Externe Ziele in einer Image-Map markieren

const areas = document.querySelectorAll('map area[href]');

for (const area of areas) {
  // Leerer hostname = kein Host (z. B. mailto:), überspringen
  if (area.hostname && area.hostname !== location.hostname) {
    area.target = '_blank';
    area.rel = 'noopener noreferrer';
    console.log(`Extern: ${area.hostname}`);
  }
}

Extern: partner.example.org

Hostname umschreiben (z. B. Staging-Umgebung)

const area = document.createElement('area');
area.href = 'https://www.example.com:443/kontakt#formular';

area.hostname = 'staging.example.com';
console.log(area.href);

// Relative URL wird gegen die Dokument-URL aufgelöst
const rel = document.createElement('area');
rel.href = '/impressum';
console.log(rel.hostname === location.hostname);

https://staging.example.com/kontakt#formular true

// Wichtig · Fallstricke

hostname und host nicht verwechseln: host enthält einen vom Standard abweichenden Port (example.com:8080), hostname nie. Für Vergleiche zwischen Ursprüngen (Origin) eignet sich origin besser.
Standard-Ports wie 443 bei https: werden beim Normalisieren entfernt. Sie erscheinen daher auch nicht in host oder href.
IDN-Domains (z. B. münchen.de) werden als Punycode zurückgegeben (xn--mnchen-3ya.de). Für den Vergleich mit Nutzereingaben sollte man diese zuerst über new URL() normalisieren.
IPv6-Adressen stehen in eckigen Klammern, z. B. [::1].
Setzt man einen ungültigen Hostnamen oder hat die URL kein hierarchisches Schema (z. B. mailto:, javascript:), wird die Zuweisung stillschweigend ignoriert. Es gibt keinen Fehler.
Sicherheit: Die Prüfung von hostname ist kein Schutz vor javascript:-URLs, denn deren Hostname ist leer. Zusätzlich sollte man protocol prüfen.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

URL.hostname HTMLAreaElement.host HTMLAreaElement.pathname HTMLAreaElement.username HTMLAreaElement.shape