js implementa ocultar, cerrar, actualizar y dar las indicaciones correspondientes

Cuando trabajamos en proyectos, a menudo nos encontramos con algunas necesidades: por ejemplo, al hacer clic en el navegador para actualizar o cerrar algunas páginas, aparecerá un mensaje correspondiente para preguntar si desea abandonar o recargar el sitio web. Por ejemplo, csdn tiene esta ventana emergente al escribir un artículo, esta función se implementa usando onbeforeunload.

Nota: Si carga el siguiente código y hace clic en actualizar cuando ingresa, puede aparecer una vez, pero después de hacer clic en recargar, si ingresa la próxima vez y hace clic en el botón actualizar nuevamente, la ventana emergente no aparecerá. La razón es que el contenido de su página no ha cambiado. La condición para que aparezca la ventana emergente después de hacer clic en recargar y luego hacer clic en actualizar es que el contenido de su página también haya cambiado, como volver a ingresar al formulario o un elemento. de la página ha cambiado o ha sido eliminado.

El código se muestra a continuación:

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

 Se activa cuando el navegador cambia a otras páginas o se minimiza (p.d.: se utiliza a menudo para detectar trampas en los exámenes)

En términos generales, esperamos utilizar la API de visibilidad de página para detener procesos innecesarios o realizar algunas operaciones en segundo plano cuando el usuario no ve la página. Pueden ocurrir las siguientes situaciones:

• Pausa el vídeo, carrusel o animación cuando el usuario abandona la página.

• Detener algunas API que obtienen datos en tiempo real

• Enviar alguna información de usuario

• ¿Cómo usarlo?

  La API de visibilidad de página tiene dos propiedades y un evento para acceder al estado de visibilidad de la página.

  document.hidden está disponible globalmente y es de solo lectura. Intente evitar su uso ya que ahora está en desuso, pero cuando se acceda a él volverá si la página está oculta y volverá  truesi está visible  false.

  Document.visibilityState (propiedad de solo lectura)

  Devuelve la visibilidad del documento, es decir, el contexto del elemento actualmente visible. A partir de esto, puede saber si el documento actual (es decir, la página) está detrás, es una pestaña oculta invisible o está pre-renderizado. Los valores disponibles son los siguientes:

• 'visible' : En este punto, el contenido de la página es al menos parcialmente visible. Es decir, esta página está en la pestaña de primer plano y la ventana no está minimizada.

• 'hidden' : La página no es visible para el usuario en este momento. Es decir, el documento está en una pestaña en segundo plano o la ventana está minimizada, o el sistema operativo está en un 'estado de pantalla de bloqueo'

• 'prerender' : La página se está procesando en este momento, por lo que es invisible (se considera oculta a los efectos de document.hidden). El documento solo puede comenzar desde este estado y nunca puede cambiar de otros valores a este estado.

• cambio de visibilidad

  visibilitychange El evento (cambio de visibilidad) se activa en un documento cuando el contenido de su pestaña se vuelve visible u oculto  .

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