Google 查看器经常打开空白页

Question

为什么

Google Viewer

有时会打开空白页面而不是打开PDF文件？

我可以使用this代码来模拟它。并不是每次都会发生。需要点击几次Google Viewer按钮。

我可以在 Edge 和 Chrome 上模拟它。

注意选项卡标题“Sem titlulo”后面的两个选项卡。他们完美地打开了 PDF 文件。但是，标题为“Sem titulo”的选项卡无法打开 PDF。

编辑

我正在使用 google 文档查看器 https://docs.google.com/viewer。

Answer 1

我尝试在 MS Edge 旧版浏览器、MS Edge (Chromium) 浏览器、Google Chrome 浏览器和 Firefox 浏览器上测试您的代码。

我可以在所有 4 个浏览器上重现该问题。所以我们可以说这不是一个特定的浏览器相关问题。

我注意到您正在使用 Google 文档查看器来显示 PDF。

https://docs.google.com/viewer？

我尝试直接在浏览器中显示 PDF，发现它在每个浏览器中都工作正常。

测试代码：

<a href="javascript:void(0);" onclick="javascipt:window.open('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf');" class="popup">Click to open PDF</a>

这是在 MS Edge (Chromium) 浏览器中的测试结果。

看来 Google 文档查看器存在一些问题。您可以尝试向 Google 提供有关此问题的反馈。

要解决代码中的问题，您可以尝试直接显示 PDF 文件，如我在示例代码中所示。您会发现性能也更好了。

Answer 2

对于具有 WP 和“嵌入任何文档”插件的客户端，通过替换默认链接来修复它。该插件会生成

div.ead-document > div.ead-iframe-wrapper > iframe

，并使用此

JS

向

.ead-document

添加一个新链接，其中包含

position: relative

:

document.addEventListener('DOMContentLoaded', function () {
        var wrappers = document.querySelectorAll('.ead-iframe-wrapper');
        wrappers.forEach(function (wrapper) {
            var iframe = wrapper.querySelector('iframe');
            if (iframe) {
                var src = iframe.getAttribute('src');
                src = src.replace('&embedded=true', '');
                var closestParent = wrapper.closest('.ead-document');
                var link = document.createElement('a');
                link.href = src;
                link.classList.add('cuPBtn');
                link.target = '_blank';
                link.textContent = '';
                closestParent.appendChild(link);
            }
        });
    });

以及链接的样式：

.cuPBtn{
    position: absolute;
    z-index: 2;
    color: white;
    background-color: black;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 12px;
    right: 12px;
}

.cuPBtn::before{
    display: block;
    width: 20px;
    height: 20px;
    content: url("data:image/svg+xml,used svg here);
}

您需要使用选择器，并且可能是

z-index