Location.port — Eigenschaft · JavaScript-Referenz

Signatur

Location.port

Beschreibung

Die Eigenschaft Location.port enthält die Portnummer der URL des aktuellen Dokuments als String, z. B. "8080". Hat die URL keinen ausdrücklich angegebenen Port oder entspricht der Port dem Standard-Port des Protokolls (80 für http:, 443 für https:), ist der Wert ein leerer String "".

Typische Einsatzfälle sind das Erkennen einer lokalen Entwicklungsumgebung (etwa localhost:3000), das Zusammensetzen von URLs zu anderen Diensten auf demselben Host (z. B. einem WebSocket-Server auf einem anderen Port) oder die Diagnose und Protokollierung.

Die Eigenschaft ist auch schreibbar: Weist man ihr einen neuen Wert zu, navigiert der Browser zur gleichen URL mit geändertem Port. Das erzeugt einen neuen Eintrag im Verlauf und lädt die Seite neu – da sich der Ursprung (Origin) ändert, gilt die neue Seite als anderer Ursprung.

Rückgabewert

Typ

string

Beschreibung

Die Portnummer als String (z. B. "8080") oder "", wenn kein Port bzw. der Standard-Port des Protokolls verwendet wird.

Beispiele

Port der aktuellen Seite auslesen

// Seite: http://localhost:8080/dashboard
console.log(location.port);
console.log(typeof location.port);

8080 string

Effektiven Port inklusive Standard-Port ermitteln

// location.port ist bei Standard-Ports leer – daher Fallback
const getEffectivePort = (loc = window.location) => {
  if (loc.port) return Number(loc.port);
  return loc.protocol === 'https:' ? 443 : 80;
};

// Seite: https://example.com/
console.log(location.port === '');
console.log(getEffectivePort());

true 443

Entwicklungsumgebung erkennen und WebSocket-URL bauen

const isDev = location.hostname === 'localhost' && location.port === '5173';

// WebSocket-Server läuft im Dev-Modus auf Port 3001, sonst auf demselben Host
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsHost = isDev ? `${location.hostname}:3001` : location.host;
const socket = new WebSocket(`${wsProtocol}//${wsHost}/live`);

console.log(socket.url);

ws://localhost:3001/live

Port per Zuweisung wechseln (löst Navigation aus)

// Seite: http://localhost:3000/app?x=1
// Wechselt zu http://localhost:4000/app?x=1 und lädt neu
const switchToPort = (port) => {
  location.port = String(port);
};

document.querySelector('#to-api')?.addEventListener('click', () => switchToPort(4000));

// Wichtig · Fallstricke

Leerer String bei Standard-Ports: Auch wenn die URL explizit https://example.com:443/ lautet, liefert location.port "", weil die URL normalisiert wird. Nie blind Number(location.port) verwenden – das ergibt 0.
Immer ein String: Vergleiche daher mit '8080' statt 8080, wenn du === nutzt.
Setzen löst Navigation aus: Eine Zuweisung lädt die Seite neu und wechselt den Origin; localStorage, Cookies (je nach Konfiguration) und Service Worker gelten portabhängig getrennt. Ungültige Werte (z. B. Buchstaben oder Werte über 65535) werden ignoriert bzw. abgeschnitten.
Bei file:-URLs und ähnlichen Schemata ohne Port ist der Wert immer ""; das Setzen hat dort keine Wirkung.
Für beliebige URLs (nicht nur die aktuelle Seite) bietet URL.prototype.port dasselbe Verhalten ohne Navigation.
Kompatibilität: in allen Browsern seit jeher unterstützt; in Workern ist die schreibgeschützte Variante WorkerLocation.port verfügbar.

Siehe auch

Location Location.host Location.hostname Location.protocol Location.origin URL.port PerformanceTiming.responseStart