Dentro de una página web, hay varios archivos PDF que me gustaría mostrar u ocultar usando Javascript (display = "none"/"block") . Esto siempre funcionó, pero dejó de funcionar con los navegadores basados en Chrome durante algunas semanas. Firefox todavía funciona bien.
Probé \<iframe> , \<object> y \<embed> sin éxito. Chrome (92.0.4515.159) muestra cada PDF solo la primera vez. La segunda vez, el campo de visión solo se muestra gris sin mostrar un problema en el depurador del navegador. Tan pronto como cambio el tamaño de la ventana del navegador, el PDF se muestra correctamente nuevamente.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body style="height: 100vh;"> <embed id = "a" src="A.pdf" type="application/pdf" style="width: 100%;height: 100%;"> <embed id = "b" src="B.pdf" type="application/pdf" style="width: 100%;height: 100%;"> <script> setInterval(toggleFunction, 1000); let toggle = false; function toggleFunction() { if (toggle) { document.getElementById("a").style.display = "none"; document.getElementById("b").style.display = "block"; } else { document.getElementById("b").style.display = "none"; document.getElementById("a").style.display = "block"; } toggle = !toggle; } </script> </body> </html>Errores del navegador resueltos con Chrome 93.0.4577.63 y Edge 94.0.992.47.
Esta no es una respuesta, la versión de Chrome 93.0.4577.63 (compilación oficial) (64 bits) no produce un comportamiento informado.
¿No hay algún problema con los pdf? ¿Te gusta el acceso caducado sin caché habilitado? Quizá no haya nada que mostrar.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body style="height: 100vh;"> <embed id = "a" src="http://www.africau.edu/images/default/sample.pdf" type="application/pdf" style="width: 100%;height: 100%;"> <embed id = "b" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" type="application/pdf" style="width: 100%;height: 100%;"> <script> setInterval(toggleFunction, 1000); let toggle = false; function toggleFunction() { if (toggle) { document.getElementById("a").style.display = "none"; document.getElementById("b").style.display = "block"; } else { document.getElementById("b").style.display = "none"; document.getElementById("a").style.display = "block"; } toggle = !toggle; } </script> </body> </html>