HTMLGeolocationElement : propriété initialPermissionStatus

Valeur

Une valeur énumérée, qui peut être :

granted

L'utilisateur·ice a déjà accordé l'autorisation au navigateur d'utiliser la fonctionnalité geolocation, soit via l'élément <geolocation>, soit par un autre mécanisme. Lors de l'utilisation de l'élément <geolocation>, cela signifie que l'utilisateur·ice a déjà appuyé sur le bouton affiché et sélectionné l'option « autoriser ».

Si l'élément <geolocation> possède l'attribut autolocate défini sur true, et que l'autorisation a déjà été accordée, le navigateur commencera à demander les données de localisation dès le chargement de la page, sans que l'utilisateur·ice ait besoin d'appuyer sur le bouton.

denied

L'utilisateur·ice a déjà refusé l'autorisation au navigateur d'utiliser la fonctionnalité geolocation, soit via l'élément <geolocation>, soit par un autre mécanisme. Lors de l'utilisation de l'élément <geolocation>, cela signifie que l'utilisateur·ice a déjà appuyé sur le bouton affiché et sélectionné l'option « ne pas autoriser ».

prompt

L'utilisateur·ice n'a pas encore accordé ni refusé l'autorisation au navigateur d'utiliser la fonctionnalité geolocation. Lors de l'utilisation de l'élément <geolocation>, cela signifie que l'utilisateur·ice n'a pas encore appuyé sur le bouton affiché.

Examples

Exemple simple

<geolocation></geolocation>

const geo = document.querySelector("geolocation");
console.log(geo.initialPermissionStatus);
// « granted » si l'utilisateur·ice a déjà accordé la permission avant de recharger la page

Utiliser l'état initial d'autorisation pour informer l'utilisateur·ice au chargement de la page

Dans cet exemple, nous utilisons l'état initial d'autorisation pour afficher un message approprié à l'écran, informant l'utilisateur·ice de l'action que le bouton <geolocation> va effectuer.

HTML

Nous incluons un élément <geolocation> et deux éléments HTML <p>, l'un pour afficher les messages d'état d'autorisation, l'autre pour afficher les données de localisation.

<geolocation>
  Votre navigateur ne prend pas en charge l'élément
  <code>&lt;geolocation&gt;</code>.
</geolocation>
<p id="status"></p>
<p id="output"></p>

JavaScript

Dans notre JavaScript, nous commençons par récupérer les références vers nos trois éléments HTML :

const statusElem = document.querySelector("#status");
const outputElem = document.querySelector("#output");
const geo = document.querySelector("geolocation");

Ensuite, nous incluons une structure if...else if qui vérifie la valeur de initialPermissionStatus et affiche un message d'état à l'écran pour informer l'utilisateur·ice du statut, de ce qu'il·elle doit faire pour utiliser l'application, et de ce que le bouton fera lorsqu'il sera pressé.

if (geo.initialPermissionStatus === "prompt") {
  statusElem.textContent =
    "Veuillez appuyer sur le bouton pour autoriser l'accès à vos données de localisation et commencer à les demander.";
} else if (geo.initialPermissionStatus === "denied") {
  statusElem.textContent =
    "Autorisation précédemment refusée. Veuillez appuyer sur le bouton pour autoriser l'accès à vos données de localisation et commencer à les demander.";
} else if (geo.initialPermissionStatus === "granted") {
  statusElem.textContent =
    "Autorisation précédemment accordée. Veuillez appuyer sur le bouton pour commencer à demander les données de localisation.";
}

Enfin, nous ajoutons un écouteur d'évènement location à l'objet HTMLGeolocationElement, pour détecter quand la demande de localisation est retournée. Si les données sont retournées avec succès, nous y accédons via la propriété HTMLGeolocationElement.position et affichons les valeurs de latitude et longitude dans le paragraphe de sortie. Si la demande échoue, nous accédons à l'erreur via la propriété HTMLGeolocationElement.error et l'affichons dans le paragraphe de sortie.

geo.addEventListener("location", () => {
  statusElem.textContent = "Données demandées";
  if (geo.position) {
    outputElem.textContent += `(${geo.position.coords.latitude},${geo.position.coords.longitude}), `;
  } else if (geo.error) {
    outputElem.textContent += `${geo.error.message}, `;
  }
});

Résultat

Voir l'exemple en direct ^(angl.) (code source ^(angl.)). Essayez de sélectionner le bouton <geolocation> plusieurs fois, de choisir une option différente dans la boîte de dialogue qui s'affiche à chaque fois et de recharger la page, pour voir comment le message affiché change selon la situation.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément HTML <geolocation>