Within a webpage, there are multiple PDFs I would like to display or hide using Javascript (display = "none"/"block").
This always worked but stopped working with chrome-based browsers for a few weeks. Firefox still works fine.
I tried \<iframe>, \<object> and \<embed> without success. Chrome (92.0.4515.159) displays each PDF only the first time. The second time, the field of view is just shown grey without showing an issue in the debugger of the browser. As soon as I resize the browser window, the PDF is displayed correctly again.
<!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>
Browser bugs solved with Chrome 93.0.4577.63 and Edge 94.0.992.47.
This is not an answer, chrome version 93.0.4577.63 (Official Build) (64-bit) does not produce reported behavior.
Isn't something wrong with the pdf's? Like expired access with no cache enabled? Maybe there's nothing to show.
<!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>