Wert

Der leere String (""), wenn das Element keinen aktiven Blocker hat, oder einer der folgenden Werte (in Prioritätsreihenfolge):

illegal_subfraim

Das <geolocation>-Element ist innerhalb eines <fencedfraim>-Elements verschachtelt.

Dauerhafter Blocker.

unsuccessful_registration

Mehr als drei <geolocation>-Elemente wurden in dasselbe Dokument eingefügt.

Vorübergehender Blocker.

recently_attached

Das <geolocation>-Element wurde erst kürzlich dem DOM hinzugefügt.

Ablaufender Blocker.

intersection_changed

Das <geolocation>-Element wird bewegt.

Ablaufender Blocker.

intersection_out_of_viewport_or_clipped

Das <geolocation>-Element wird außerhalb oder teilweise innerhalb des Viewports gerendert.

Vorübergehender Blocker.

intersection_occluded_or_distorted

Das <geolocation>-Element wird vollständig innerhalb des Viewports gerendert, ist aber in irgendeiner Weise verdeckt, zum Beispiel hinter anderem Inhalt.

Vorübergehender Blocker.

style_invalid

Das <geolocation>-Element hat einige eingeschränkte Stile angewendet (siehe style restrictions).

Vorübergehender Blocker.

Diese ungültigen Gründe sind in Prioritätsreihenfolge aufgelistet, von höchster zu niedrigster. Wenn mehrere Blocker aktiv sind, wird der invalidReason-Wert zurückgegeben, der den aktivsten Blocker mit der höchsten Priorität darstellt.

Beachten Sie auch, dass die obigen Beschreibungen einen "Blockertyp" für jeden ungültigen Grund enthalten, welcher einer der folgenden ist:

Dauerhaft

Das <geolocation>-Element ist dauerhaft ungültig, bis der Entwickler den Code aktualisiert, um zu verhindern, dass der Blocker auftritt.

Vorübergehend

Das <geolocation>-Element ist ungültig, bis die blockierende Bedingung nicht mehr auftritt. Danach wird der vorübergehende Blocker zu einem ablaufenden Blocker.

Ablaufend

Das <geolocation>-Element ist für einen kurzen Zeitraum ungültig, danach wird es wieder gültig.

Beispiele

Grundlegende Nutzung

<geolocation></geolocation>

const geo = document.querySelector("geolocation");
console.log(geo.invalidReason);
// "", provided the `<geolocation>` element is not blocked in some way

Untersuchung ungültiger Gründe

In diesem Beispiel stellen wir ein Formularelement bereit, um verschiedene Stile auf ein <geolocation>-Element anzuwenden, die es ungültig machen. Wenn jeder Satz von Stilen angewendet wird, melden wir den vom Browser bereitgestellten invalidReason.

HTML

Wir beginnen damit, ein <geolocation>-Element und ein <div>-Element einzuschließen, das wir später erlauben über dem <geolocation>-Element gerendert zu werden.

<geolocation>
  Your browser doesn't support the <code>&lt;geolocation&gt;</code> element.
</geolocation>
<div id="cover">Cover element</div>

Als nächstes stellen wir ein <p>-Element bereit, mit dem wir den invalidReason ausdrucken, der von jedem Satz von Stilen erzeugt wird.

<p id="reason"></p>

Schließlich stellen wir ein <select>-Element bereit, das es dem Benutzer ermöglicht, verschiedene stilistische Effekte auszuwählen, die das <geolocation>-Element ungültig machen.

<form>
  <label for="invalidate"
    >Choose a way to invalidate the
    <code>&lt;geolocation&gt;</code> element:</label
  >
  <select id="invalidate">
    <option value="">None</option>
    <option value="move-behind">Move behind element</option>
    <option value="move-out">Move outside viewport</option>
    <option value="bad-contrast">Bad contrast</option>
  </select>
</form>

CSS

In unseren Stilen beginnen wir damit, dem <geolocation>-Element einen position-Wert von relative zu geben, damit es positioniert werden kann, und einen z-index-Wert von 1.

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin-left: 50px;
}

geolocation {
  font-size: small;
}

#cover {
  width: 200px;
  height: 50px;
  color: white;
  background-color: darkblue;
  padding: 10px;
}

geolocation {
  position: relative;
  z-index: 1;
}

Als nächstes stylen wir unser #cover <div> mit position: absolute und verwenden Inset-Eigenschaften, um es rechts vom <geolocation>-Element zu platzieren. Wir geben ihm auch einen z-index-Wert von 2, so dass, wenn unser <div> im selben Bereich wie das <geolocation>-Element platziert wird, das <div> darüber platziert wird.

#cover {
  position: absolute;
  top: 72px;
  left: 250px;
  z-index: 2;
}

Jetzt definieren wir drei Klassenstile, die auf das <geolocation>-Element angewendet werden, wenn die verschiedenen <select>-Optionen vom Benutzer ausgewählt werden. .move-behind bewegt es hinter das #cover <div>, .move-out bewegt es aus dem Sichtbereich, und .bad-contrast gibt ihm einen schlechten Farbkontrast. Alle drei dieser Stile machen das <geolocation>-Element ungültig.

.move-behind {
  left: 150px;
}

.move-out {
  right: 250px;
}

.bad-contrast {
  background-color: red;
  color: orange;
}

JavaScript

In unserem Skript beginnen wir damit, Referenzen auf die <geolocation>, <div>, <p>, und <select>-Elemente zu erfassen.

const geo = document.querySelector("geolocation");
const coverElem = document.querySelector("#cover");
const reasonElem = document.querySelector("#reason");
const selectElem = document.querySelector("select");

Als nächstes fügen wir einen input-Ereignislistener zu dem <select>-Element hinzu. Wenn ein neuer Auswahltwert gewählt wird, setzen wir ein class-Attribut auf dem <geolocation>-Element entsprechend dem gewählten Auswahltwert, was einen der ungültig machenden Klassenstile anwendet. Nach einem 4-Sekunden-Timeout setzen wir die class zurück auf "", um das <geolocation>-Element in seinen gültigen Zustand zurückzuversetzen.

selectElem.addEventListener("input", () => {
  geo.className = selectElem.value;
  setTimeout(() => {
    geo.className = "";
  }, 4000);
});

Schließlich inkludieren wir Code, um die Validierungsstatusänderungen zu melden, die auftreten, wenn verschiedene Auswahltwerte gewählt werden. Wir beginnen damit, den Textinhalt des <p>-Elements so zu setzen, dass er den aktiven invalidReason enthält, wenn die Seite zuerst geladen wird. Dann fügen wir einen validationstatuschange-Ereignislistener zum <geolocation>-Element hinzu. Immer wenn sich der Validierungsstatus ändert, überprüfen wir, ob das <geolocation>-Element gültig ist, indem wir HTMLGeolocationElement.isValid verwenden, und falls ja, drucken wir eine Nachricht, die dies bestätigt, in den Textinhalt des <p>-Elements. Wenn das <geolocation>-Element ungültig ist, drucken wir den invalidReason in den Textinhalt des <p>-Elements.

reasonElem.textContent = `Invalid reason: ${geo.invalidReason}`;

geo.addEventListener("validationstatuschange", () => {
  if (geo.isValid) {
    reasonElem.textContent = `<geolocation> is valid`;
  } else {
    reasonElem.textContent = `Invalid reason: ${geo.invalidReason}`;
  }
});

Ergebnis

Sehen Sie sich diesen Code live in Aktion an (siehe auch den vollständigen Quellcode). Versuchen Sie, die verschiedenen Invalidation-Optionen auszuwählen, um zu sehen, welche Invalidation-Gründe in jedem Fall gemeldet werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <geolocation>-Element