Tengo una página web que monitorea un proceso y se actualiza cada diez segundos. Para hacer esto, simplemente tengo una declaración en la sección <Head>
del HTML: <meta http-equiv="refresh" content="10">
Esto funciona bien, pero...
Tengo un botón en la página que permite un reinicio remoto del sistema. Para confirmar esta acción, tengo una página modal que aparece pidiéndole al usuario que confirme. Sin embargo, si la página original se ha mostrado durante, digamos, nueve segundos, la página modal se muestra solo durante un segundo antes de actualizarse y desaparecer.
¿Hay alguna manera simple de desactivar la actualización de la página mientras se muestra la página modal y luego reiniciarla una vez que se haya dado la confirmación?
Necesita algo de javascript para manejar la pausa de la página.
Como nota, probablemente debería manejar la actualización del contenido con una llamada Ajax o similar, y luego actualizar el contenido de esa manera. Como nota, W3C tiene una nota sobre el valor de refresh
.
Nota: El valor "actualizar" debe usarse con cuidado, ya que quita el control de una página al usuario. El uso de "actualizar" provocará una falla en las Pautas de accesibilidad de contenido web de W3C.
Una solución simple podría ser detener la actualización de la ventana cuando el modal está abierto y reanudar la funcionalidad de actualización cuando el usuario cierra el modal.
<head>
<meta http-equiv="refresh" content="1">
<title>Refresh page</title>
</head>
<body>
<p id="demo"></p>
<button onclick="stopRefresh()">pause</button>
<button onclick="startRefresh()">start</button>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = "" + d.getTime();
const stopRefresh = () => {
window.stop(); // Use this to stop the refresh: when modal opens
}
const startRefresh = () => {
document.location.reload(); // Resume the refresh: when modal closes
}
</script>
</body>