logo标签列表

谷歌浏览器和微软Edge自带的PDF阅读器无法正确显示PDF文件。

javascripthtmlcssgoogle-chromepdf
3
在网页中，我想使用JavaScript (display = "none"/"block") 显示或隐藏多个PDF文件。这项功能一直都有效，但在基于Chrome的浏览器中已经不起作用几个星期了（Firefox仍然正常工作）。
我尝试过\<iframe>、\<object> 和\<embed>，但都没有成功。Chrome（92.0.4515.159）只在第一次显示每个PDF。第二次，视图区域只会呈现灰色，在浏览器调试器中也没有显示问题。只要我调整浏览器窗口大小，PDF文件就能正确地显示出来。
<!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>
你尝试过使用iframe吗？或者，你可以尝试使用https://mozilla.github.io/pdf.js/。 - turtlepick
@turtlepick 在使用 iframe 时出现了相同的问题。pdf.js 可以解决，但会使其变慢并增加复杂度。看来我在这里过于乐观了。感谢提示。 - Jürg Schneider
2个回答
1

Chrome 93.0.4577.63和Edge 94.0.992.47解决了与浏览器相关的问题。

0

这不是一个答案，Chrome 版本 93.0.4577.63（官方版本）（64 位）没有出现报告的行为。

PDF 文件有问题吗？比如过期访问且没有启用缓存？也许没有内容可显示。

<!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>

1
Chrome 93.0.4577.63 中一切正常。Microsoft Edge 92.0.902.73 仍然存在问题，即使使用您的 PDF 文件也是如此。因此，这显然是一个“简单”的浏览器错误，我希望微软也能尽快修复它。 - Jürg Schneider
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接