HTMLGeolocationElement : propriété invalidReason

Valeur

La chaîne vide ("") si l'élément n'a pas de bloqueur actif, ou l'une des valeurs suivantes (par ordre de priorité) :

illegal_subframe

L'élément HTML <geolocation> est imbriqué dans un élément HTML <fencedframe>.

Bloqueur permanent.

unsuccessful_registration

Plus de trois éléments HTML <geolocation> ont été insérés dans le même document.

Bloqueur temporaire.

recently_attached

L'élément HTML <geolocation> vient d'être ajouté au DOM.

Bloqueur expirant.

intersection_changed

L'élément HTML <geolocation> est en cours de déplacement.

Bloqueur expirant.

intersection_out_of_viewport_or_clipped

L'élément HTML <geolocation> est affiché en dehors ou partiellement dans la zone d'affichage.

Bloqueur temporaire.

intersection_occluded_or_distorted

L'élément HTML <geolocation> est entièrement affiché dans la zone d'affichage, mais il est masqué d'une certaine manière, par exemple affiché derrière un autre contenu.

Bloqueur temporaire.

style_invalid

L'élément HTML <geolocation> a des styles restreints appliqués (voir restrictions de mise en forme).

Bloqueur temporaire.

Ces raisons d'invalidité sont listées par ordre de priorité, de la plus haute à la plus basse. Si plusieurs bloqueurs sont actifs, la valeur invalidReason retournée sera celle représentant le bloqueur actif de plus haute priorité.

Notez également que les descriptions ci-dessus incluent un « type de bloqueur » pour chaque raison d'invalidité, qui peut être :

Permanent

L'élément <geolocation> est définitivement invalide jusqu'à ce que le·la développeur·euse mette à jour le code pour empêcher le bloqueur de se produire.

Temporaire

L'élément <geolocation> est invalide tant que la condition de blocage persiste. Ensuite, le bloqueur temporaire devient un bloqueur expirant.

Expirant

L'élément <geolocation> est invalide pendant une courte période, après quoi il redevient valide.

Exemples

Exemple simple

<geolocation></geolocation>

const geo = document.querySelector("geolocation");
console.log(geo.invalidReason);
// "", tant que l'élément `<geolocation>` n'est pas bloqué d'une quelconque manière

Explorer les raisons d'invalidité

Dans cet exemple, nous proposons un contrôle de formulaire pour appliquer différents styles à un élément <geolocation> afin de le rendre invalide. Lorsque chaque ensemble de styles est appliqué, nous rapportons la valeur invalidReason fournie par le navigateur.

HTML

Nous commençons par inclure un élément <geolocation> et un élément HTML <div> qui pourra ensuite être affiché au-dessus de l'élément <geolocation>.

<geolocation>
  Votre navigateur ne prend pas en charge l'élément
  <code>&lt;geolocation&gt;</code>.
</geolocation>
<div id="cover">Élément de couverture</div>

Ensuite, nous ajoutons un élément HTML <p> qui affichera la raison d'invalidité générée par chaque ensemble de styles.

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

Enfin, nous ajoutons un élément HTML <select> pour permettre à l'utilisateur·ice de choisir différents effets de mise en forme qui invalident l'élément <geolocation>.

<form>
  <label for="invalidate"
    >Choisissez une façon d'invalider l'élément
    <code>&lt;geolocation&gt;</code>&nbsp;:</label
  >
  <select id="invalidate">
    <option value="">Aucune</option>
    <option value="move-behind">Déplacer derrière l'élément</option>
    <option value="move-out">Déplacer hors de la zone d'affichage</option>
    <option value="bad-contrast">Mauvais contraste</option>
  </select>
</form>

CSS

Dans nos styles, nous commençons par donner à l'élément <geolocation> une valeur position de relative pour qu'il puisse être positionné, et une valeur z-index de 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;
}

Ensuite, nous mettons en forme notre <div> #cover avec position: absolute et utilisons propriétés d'encart pour le placer à droite de l'élément <geolocation>. Nous lui donnons également une valeur de z-index de 2 afin que, si notre <div> est placé dans la même zone que l'élément <geolocation>, le <div> soit affiché au-dessus.

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

Nous définissons maintenant trois styles de classe qui seront appliqués à l'élément <geolocation> lorsque les différentes options du <select> sont choisies par l'utilisateur·ice. .move-behind le déplace derrière le <div> #cover, .move-out le déplace hors écran, et .bad-contrast lui donne un mauvais contraste de couleur. Ces trois styles rendent l'élément <geolocation> invalide.

.move-behind {
  left: 150px;
}

.move-out {
  right: 250px;
}

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

JavaScript

Dans notre script, nous commençons par récupérer les références vers les éléments <geolocation>, <div>, <p> et <select>.

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

Ensuite, nous ajoutons un écouteur d'évènement input à l'élément <select>. Lorsqu'une nouvelle valeur est choisie, nous définissons l'attribut class de l'élément <geolocation> égal à la valeur sélectionnée, ce qui applique l'un des styles invalidants. Après un délai de 4 secondes, nous réinitialisons la class à "", pour rendre l'élément <geolocation> à nouveau valide.

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

Enfin, nous incluons du code pour rapporter les changements de statut de validation qui se produisent lorsque différentes valeurs de sélection sont choisies. Nous commençons par définir le contenu texte du <p> pour inclure la raison d'invalidité active au chargement de la page. Nous ajoutons ensuite un écouteur d'évènement validationstatuschange à l'élément <geolocation>. À chaque changement de statut de validation, nous vérifions si l'élément <geolocation> est valide avec HTMLGeolocationElement.isValid, et si c'est le cas, nous affichons un message de confirmation dans le contenu texte du <p>. Si l'élément <geolocation> est invalide, nous affichons la raison d'invalidité dans le contenu texte du <p>.

reasonElem.textContent = `Raison d'invalidité : ${geo.invalidReason}`;

geo.addEventListener("validationstatuschange", () => {
  if (geo.isValid) {
    reasonElem.textContent = `<geolocation> est valide`;
  } else {
    reasonElem.textContent = `Raison d'invalidité : ${geo.invalidReason}`;
  }
});

Résultat

Voir ce code en direct ^(angl.) (voir aussi le code source complet ^(angl.)). Essayez de choisir différentes options d'invalidation pour voir quelles raisons d'invalidation sont rapportées dans chaque cas.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément HTML <geolocation>