HTMLGeolocationElement.isValid — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLGeolocationElement.isValid

Beschreibung

Die Eigenschaft isValid des Interfaces HTMLGeolocationElement gibt an, ob das zugehörige <geolocation>-Element gerade gültig ist. Das Element ist ein sogenanntes Berechtigungselement: Der Browser zeichnet selbst eine Schaltfläche, über die der Benutzer der Seite seinen Standort freigeben kann. Damit Seiten den Benutzer nicht zu einem unbeabsichtigten Klick verleiten können, prüft der Browser laufend, ob das Element deutlich sichtbar und unverändert dargestellt wird.

Ist das nicht der Fall, blockiert der Browser das Element. Das kann zum Beispiel passieren, wenn es verdeckt oder außerhalb des sichtbaren Bereichs liegt, per CSS verzerrt, zu klein oder zu kontrastarm gestaltet ist, gerade erst ins DOM eingefügt wurde oder in einem nicht erlaubten iframe steckt. In diesem Zustand liefert isValid den Wert false, und ein Klick löst keine Berechtigungsabfrage aus. Den genauen Grund liest man über invalidReason aus.

Ändert sich der Gültigkeitsstatus, löst der Browser das Ereignis validationstatuschange am Element aus. Die übliche Vorgehensweise ist deshalb: auf dieses Ereignis hören, isValid und invalidReason auswerten und die Oberfläche entsprechend anpassen, etwa mit einem Hinweistext oder einer anderen Möglichkeit, den Standort anzugeben.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element gültig ist und der Benutzer es aktivieren kann. false, wenn der Browser es gerade blockiert. Den Grund dafür liefert invalidReason.

Beispiele

Gültigkeit einmalig prüfen

const geo = document.querySelector('geolocation');

if (geo && 'isValid' in geo) {
  console.log('Gültig:', geo.isValid);
  if (!geo.isValid) {
    console.log('Grund:', geo.invalidReason);
  }
} else {
  console.log('<geolocation> wird nicht unterstützt');
}

Gültig: false Grund: recently_attached

Auf Statusänderungen reagieren

const geo = document.querySelector('geolocation');
const hint = document.querySelector('#geo-hint');

const updateHint = () => {
  if (geo.isValid) {
    hint.textContent = 'Klicken Sie auf die Schaltfläche, um Ihren Standort zu teilen.';
  } else {
    hint.textContent = `Standortfreigabe derzeit nicht möglich (${geo.invalidReason}).`;
  }
};

geo.addEventListener('validationstatuschange', updateHint);
updateHint();

Dynamisch eingefügtes Element mit Ausweichlösung

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

if ('HTMLGeolocationElement' in window) {
  const geo = document.createElement('geolocation');
  container.append(geo);

  // direkt nach dem Einfügen ist das Element kurz blockiert
  console.log('Direkt nach dem Einfügen:', geo.isValid);

  geo.onvalidationstatuschange = () => {
    console.log('Neuer Status:', geo.isValid);
  };

  geo.addEventListener('location', () => {
    if (geo.position) {
      const { latitude, longitude } = geo.position.coords;
      console.log(`Standort: ${latitude}, ${longitude}`);
    }
  });
} else {
  // Ausweichlösung: klassische Geolocation-API
  const button = document.createElement('button');
  button.textContent = 'Standort verwenden';
  button.addEventListener('click', () => {
    navigator.geolocation.getCurrentPosition(
      ({ coords }) => console.log(`Standort: ${coords.latitude}, ${coords.longitude}`),
      (err) => console.error(err.message)
    );
  });
  container.append(button);
}

Direkt nach dem Einfügen: false Neuer Status: true

// Wichtig · Fallstricke

Experimentell: <geolocation> und HTMLGeolocationElement gibt es bislang nur in Chromium-basierten Browsern. Firefox und Safari unterstützen sie nicht. Prüfen Sie die Unterstützung immer vorher, z. B. mit 'HTMLGeolocationElement' in window, und bieten Sie eine Ausweichlösung über navigator.geolocation an.
Nur lesbar: Wer isValid einen Wert zuweist, ändert nichts. Im strikten Modus kann das sogar einen TypeError auslösen. Die Gültigkeit hängt allein von Darstellung und Umgebung des Elements ab.
Vorübergehend ungültig: Direkt nach dem Einfügen ins DOM oder nach einer Lageänderung, zum Beispiel beim Scrollen oder bei Animationen, ist das Element kurz blockiert. Werten Sie isValid deshalb nicht nur einmal aus, sondern hören Sie auf validationstatuschange.
Styling: Geringe Deckkraft, Transformationen, zu kleine Schrift, schwacher Kontrast oder Überlagerungen durch andere Elemente machen das Element ungültig. Das ist eine Schutzmaßnahme gegen Clickjacking und lässt sich nicht umgehen.
iframes: In eingebetteten Frames muss die Berechtigungsrichtlinie (allow="geolocation") das Element erlauben. Sonst bleibt isValid dauerhaft false.

Siehe auch

HTMLGeolocationElement.error HTMLGeolocationElement.watch HTMLGeolocationElement.invalidReason HTMLGeolocationElement.position HTMLGeolocationElement.autolocate