new HTMLGeolocationElement() — Methode · JavaScript-Referenz

Signatur

new HTMLGeolocationElement()

Beschreibung

HTMLGeolocationElement ist das DOM-Interface des experimentellen HTML-Elements <geolocation>. Das Element zeigt einen vom Browser gestalteten Button an. Klickt die Person darauf, fragt der Browser nach der Standortfreigabe und liefert danach die Position. So hängt die Berechtigungsanfrage immer an einer echten Nutzeraktion und kommt nicht unaufgefordert per Skript, wie es bei navigator.geolocation.getCurrentPosition() der Fall ist.

Wie alle eingebauten HTML-Elemente ist das Interface mit [HTMLConstructor] definiert. Ein direkter Aufruf von new HTMLGeolocationElement() scheitert deshalb normalerweise mit TypeError: Illegal constructor. Ein neues Element erzeugst du über document.createElement("geolocation") oder per HTML-Markup. Der Konstruktor ist trotzdem nützlich: Mit instanceof HTMLGeolocationElement prüfst du den Typ, und mit "HTMLGeolocationElement" in window erkennst du, ob der Browser das Element unterstützt.

Das fertige Element gibst du erst ins DOM. Danach reagierst du auf das Ereignis location und liest die Eigenschaften position (eine GeolocationPosition) bzw. error (ein GeolocationPositionError). Das Verhalten steuerst du über Attribute: autolocate holt die Position automatisch, wenn die Berechtigung schon erteilt ist, und watch verfolgt den Standort fortlaufend.

Rückgabewert

Typ

HTMLGeolocationElement

Beschreibung

Ein neues HTMLGeolocationElement. Bei einem direkten Aufruf ohne Custom-Element-Kontext wird stattdessen normalerweise ein TypeError geworfen. Erzeuge das Element daher mit document.createElement("geolocation").

Beispiele

Unterstützung erkennen und Element korrekt erzeugen

if ("HTMLGeolocationElement" in window) {
  // Empfohlener Weg statt new HTMLGeolocationElement()
  const geo = document.createElement("geolocation");
  console.log(geo instanceof HTMLGeolocationElement);
  document.querySelector("#standort").append(geo);
} else {
  console.log("<geolocation> wird nicht unterstützt – Fallback nutzen");
}

true

Direkter Konstruktor-Aufruf wirft einen Fehler

try {
  const geo = new HTMLGeolocationElement();
  console.log("Erzeugt:", geo.tagName);
} catch (err) {
  console.log(err.name + ": " + err.message);
}

TypeError: Illegal constructor

Standort per Nutzerklick abfragen, mit Fallback

const container = document.querySelector("#standort");

const zeigePosition = ({ coords }) => {
  console.log(`Breite: ${coords.latitude}, Länge: ${coords.longitude}`);
};

if ("HTMLGeolocationElement" in window) {
  const geo = document.createElement("geolocation");
  geo.setAttribute("autolocate", "");
  geo.addEventListener("location", () => {
    if (geo.position) {
      zeigePosition(geo.position);
    } else if (geo.error) {
      console.error("Fehler:", geo.error.message);
    }
  });
  container.append(geo);
} else {
  // Fallback: klassischer Button + Geolocation-API
  const btn = document.createElement("button");
  btn.textContent = "Standort verwenden";
  btn.addEventListener("click", () => {
    navigator.geolocation.getCurrentPosition(zeigePosition, (e) =>
      console.error("Fehler:", e.message)
    );
  });
  container.append(btn);
}

Breite: 52.52, Länge: 13.405

// Wichtig · Fallstricke

Experimentell: <geolocation> und HTMLGeolocationElement gibt es bisher nur in Chromium-basierten Browsern, und dort nur per Origin Trial oder Flag. Firefox und Safari unterstützen das Element nicht. Prüfe die Unterstützung deshalb immer vorab und biete einen Fallback über navigator.geolocation an. Namen, Attribute und Ereignisse können sich noch ändern.
Illegal constructor: Ein direkter Aufruf von new HTMLGeolocationElement() wirft normalerweise einen TypeError. Man kann auch nicht davon ableiten und ein Custom Element mit extends HTMLGeolocationElement bauen. Nutze stattdessen document.createElement("geolocation").
Sicherheit und Gestaltung: Der Browser prüft, ob das Element für die Person gut sichtbar ist, z. B. Kontrast, Größe, keine Überdeckung und keine Transparenz. Ist das nicht erfüllt, wird das Element ungültig und reagiert nicht auf Klicks. Dazu kommt: Die Funktion gibt es nur in sicheren Kontexten (HTTPS), und in iframes muss die Permissions-Policy geolocation sie erlauben.
Datenschutz: Standortdaten sind personenbezogen. Frage sie nur ab, wenn du sie wirklich brauchst, und erkläre den Zweck.

Siehe auch

Permissions.query() new ExtendableMessageEvent() new HTMLOutputElement() new CompositionEvent() new DeviceMotionEvent()