Within a webpage there are multiple PDFs I would like to display or hide using Javascript (dispay = "none"/"block"). This always worked, but stopped working with chrome based browsers since a few weeks. Firefox still works fine. I tried <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. Thanks for any hints!
<!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>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment