HTMLAreaElement.port — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.port

Beschreibung

Die Eigenschaft port der Schnittstelle HTMLAreaElement gibt die Portnummer der URL im href-Attribut eines <area>-Elements einer Image-Map als String zurück. Sie gehört zu den URL-Zerlegungseigenschaften, die HTMLAreaElement über das Mixin HTMLHyperlinkElementUtils bekommt. Dieselben Eigenschaften gibt es auch bei HTMLAnchorElement und URL.

Ist in der URL kein Port angegeben oder entspricht er dem Standardport des Schemas (80 bei http:, 443 bei https:), ist der Wert ein leerer String. Das Gleiche gilt, wenn href fehlt oder sich nicht als URL auswerten lässt.

Die Eigenschaft ist schreibbar. Beim Setzen wird die URL im href-Attribut sofort angepasst. Ein leerer String entfernt den Port, ein Standardport wird automatisch weggelassen. Das ist praktisch, wenn Verweise einer Image-Map zur Laufzeit auf eine andere Umgebung zeigen sollen, etwa auf einen lokalen Entwicklungsserver.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: neue Portnummer als String (Zahlen werden in Strings umgewandelt). Ein leerer String entfernt den Port.

Rückgabewert

Typ

string

Beschreibung

Portnummer der URL im href-Attribut, z. B. "8080", oder "", wenn kein Port angegeben ist, der Standardport verwendet wird oder href ungültig ist bzw. fehlt.

Beispiele

Port eines area-Elements auslesen

const map = document.createElement('map');
map.innerHTML = `
  <area id="dev" shape="rect" coords="0,0,100,100" href="https://example.com:8080/karte" alt="Dev">
  <area id="prod" shape="rect" coords="100,0,200,100" href="https://example.com/karte" alt="Prod">
`;
document.body.append(map);

console.log(document.getElementById('dev').port);
console.log(JSON.stringify(document.getElementById('prod').port));

8080 ""

Port setzen, um auf einen lokalen Server umzuleiten

const area = document.createElement('area');
area.href = 'http://localhost/api/region';

area.port = '3000';
console.log(area.href);

// Standardport wird automatisch weggelassen
area.port = '80';
console.log(area.href);

http://localhost:3000/api/region http://localhost/api/region

Alle Bereiche einer Image-Map mit abweichendem Port finden

const areasMitPort = [...document.querySelectorAll('map area[href]')]
  .filter((area) => area.port !== '')
  .map((area) => ({ alt: area.alt, port: Number(area.port) }));

console.table(areasMitPort);

Tabelle mit alt-Text und Portnummer aller betroffenen Bereiche

// Wichtig · Fallstricke

Der Rückgabewert ist immer ein String, keine Zahl. Zum Rechnen oder für strikte Vergleiche mit Number() umwandeln.
Standardports (80 bei http:, 443 bei https:) ergeben einen leeren String, auch wenn sie ausdrücklich im href stehen. Wer den tatsächlich verwendeten Port braucht, muss ihn aus dem protocol ableiten.
Ungültige Werte beim Setzen (z. B. \"abc\") werden stillschweigend ignoriert. Ein Wert über 65535 lässt die URL unverändert. Beginnt der Wert mit Ziffern, wird nur der Ziffernanfang übernommen (\"8080abc\" ergibt 8080).
Bei Schemata ohne Host (z. B. mailto:) oder bei file:-URLs hat das Setzen keine Wirkung.
Relative href-Werte werden gegen die Basis-URL des Dokuments aufgelöst. port kann also den Port der aktuellen Seite zurückgeben.
Wird von allen modernen Browsern unterstützt.

Siehe auch

URL.port HTMLAreaElement.host HTMLAreaElement.alt HTMLAreaElement.ping HTMLAreaElement.coords