HTMLAreaElement.protocol — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.protocol

Beschreibung

Die Eigenschaft protocol der Schnittstelle HTMLAreaElement liefert das Schema der verlinkten URL als String, zum Beispiel "https:", "mailto:" oder "tel:". Der abschließende Doppelpunkt gehört immer dazu. Die Eigenschaft stammt aus dem Mixin HTMLHyperlinkElementUtils und verhält sich genauso wie HTMLAnchorElement.protocol oder URL.protocol.

Gebraucht wird sie vor allem bei Image-Maps, also Bildern mit klickbaren Bereichen (<map> mit <area>). Typische Aufgaben: externe von internen Links unterscheiden, mailto:- und tel:-Bereiche gesondert behandeln oder alle Links nachträglich von http: auf https: umstellen.

Setzt man einen neuen Wert, schreibt der Browser das href-Attribut neu. Der Doppelpunkt ist dabei freiwillig, denn "https" und "https:" führen zum selben Ergebnis. Ungültige Schemata werden ohne Fehlermeldung ignoriert. Ein Wechsel zwischen „speziellen“ Schemata (http, https, ftp, ws, wss, file) und nicht-speziellen Schemata wie mailto ist laut URL-Standard ebenfalls nicht möglich.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: das neue Schema, mit oder ohne abschließendes `:`, z. B. `"https"`.

Rückgabewert

Typ

string

Beschreibung

Das Schema der URL in Kleinbuchstaben einschließlich :, z. B. "https:". Fehlt href, ist der Wert ein leerer String. Ist href ungültig, ist er ebenfalls leer (in älteren Browsern teils ":").

Beispiele

Protokoll eines Bereichs auslesen

// <map name="karte"><area id="kontakt" shape="rect" coords="0,0,50,50" href="mailto:info@example.com" alt="Kontakt"></map>
const area = document.getElementById('kontakt');
console.log(area.protocol);

mailto:

Alle HTTP-Bereiche einer Image-Map auf HTTPS umstellen

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

for (const area of areas) {
  if (area.protocol === 'http:') {
    area.protocol = 'https'; // Doppelpunkt ist optional
    console.log('Umgestellt:', area.href);
  }
}

Umgestellt: https://example.com/produkte

Bereiche mit mailto: und tel: gesondert behandeln

document.querySelector('map[name="karte"]').addEventListener('click', (event) => {
  const area = event.target.closest('area');
  if (!area) return;

  switch (area.protocol) {
    case 'mailto:':
    case 'tel:':
      console.log('Kontaktaktion:', area.href);
      break;
    case 'https:':
    case 'http:':
      if (area.hostname !== location.hostname) {
        area.target = '_blank';
        area.rel = 'noopener noreferrer';
      }
      break;
  }
});

Kontaktaktion: tel:+49301234567

// Wichtig · Fallstricke

Doppelpunkt nicht vergessen: Beim Lesen endet der Wert immer auf :. Ein Vergleich wie area.protocol === 'https' ist deshalb immer false.
Setzen scheitert ohne Fehlermeldung: Ungültige Schemata und Wechsel zwischen speziellen und nicht-speziellen Schemata (z. B. https: → mailto:) werden ignoriert. Es wird keine Ausnahme geworfen. Prüfe das Ergebnis danach über area.href.
Relative URLs: Relative href-Werte werden gegen die Basis-URL des Dokuments aufgelöst. protocol liefert dann das Schema der Seite, z. B. \"https:\".
Sicherheit: Wer Links aus Benutzereingaben erzeugt, sollte das Protokoll mit einer Positivliste prüfen (etwa nur https:, mailto:, tel:). So lassen sich javascript:-URLs und damit XSS verhindern.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Bei ungültigen URLs unterscheiden sich ältere Browser: Manche liefern \":\" statt eines leeren Strings.

Siehe auch

URL.protocol HTMLAreaElement.coords HTMLAreaElement.interestForElement HTMLAreaElement.port HTMLAreaElement.rel