js implémente le masquage, la fermeture, l'actualisation des pages et l'affichage des invites correspondantes

Lorsque nous travaillons sur des projets, nous rencontrons souvent certains besoins. Par exemple, lorsque nous cliquons sur le navigateur pour actualiser ou fermer certaines pages, une invite correspondante s'affichera pour nous demander si nous devons quitter ou recharger le site Web. Par exemple, csdn a cette fenêtre pop-up lors de la rédaction d'un article. Cette fonction est implémentée en utilisant onbeforeunload.

Remarque : Si vous chargez le code suivant et cliquez sur Actualiser lorsque vous entrez, il peut apparaître une fois, mais après avoir cliqué sur recharger, si vous entrez la prochaine fois et cliquez à nouveau sur le bouton Actualiser, la fenêtre contextuelle n'apparaîtra pas. est que votre page Le contenu n'a pas changé. La condition pour que la fenêtre contextuelle apparaisse après avoir cliqué sur recharger puis sur Actualiser est que le contenu de votre page a également changé, comme une nouvelle saisie du formulaire, ou un élément de la page a été modifiée ou supprimée.

le code s'affiche comme ci-dessous :

window.onbeforeunload = function (e) {
      e = e | window.event;
      if (e) {
        e.returnValue = '关闭提示';
      }
      return false;
    };

 Déclenché lorsque le navigateur passe à d'autres pages ou est minimisé (ps : souvent utilisé pour détecter la tricherie lors des examens)

De manière générale, nous espérons utiliser l'API Page Visibility pour arrêter les processus inutiles ou effectuer certaines opérations en arrière-plan lorsque l'utilisateur ne voit pas la page. Les situations suivantes peuvent se produire :

• Mettez en pause la vidéo, le carrousel ou l'animation lorsque l'utilisateur quitte la page.

• Arrêtez certaines API qui obtiennent des données en temps réel

• Envoyer des informations utilisateur

• Comment l'utiliser?

  L'API Page Visibility possède deux propriétés et un événement pour accéder à l'état de visibilité de la page.

  document.hidden est disponible dans le monde entier et en lecture seule. Essayez d'éviter de l'utiliser car il est désormais obsolète, mais une fois accessible, il reviendra si la page est masquée et il reviendra  truesi elle est visible  false.

  Document.visibilityState (propriété en lecture seule)

  Renvoie la visibilité du document, c'est-à-dire le contexte de l'élément actuellement visible. À partir de là, vous pouvez savoir si le document actuel (c'est-à-dire la page) est en retard, ou s'il s'agit d'un onglet caché invisible, ou (est) pré-rendu. Les valeurs disponibles sont les suivantes :

• 'visible' : À ce stade, le contenu de la page est au moins partiellement visible. Autrement dit, cette page est au premier plan et la fenêtre n'est pas réduite.

• 'hidden' : La page n'est pas visible par l'utilisateur pour le moment. Autrement dit, le document se trouve dans un onglet d'arrière-plan, la fenêtre est réduite ou le système d'exploitation est dans un « état d'écran verrouillé ».

• 'prerender' : La page est en cours de rendu à ce moment, elle est donc invisible (considérée comme cachée aux fins de document.hidden). Le document ne peut partir qu'à partir de cet état et ne peut jamais passer d'autres valeurs à cet état.

• changement de visibilité

  visibilitychange L'événement (visibilité modifiée) est déclenché sur un document lorsque le contenu de son onglet devient visible ou masqué  .

• document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "visible") {
          // page is visible
      } else {
          // page is hidden
      }
  });