Why Google Viewer sometimes is opening a blank page instead of open the PDF file?

I could simulate it using this code. It doesn't happen every time. It will be necessary to click on the Google Viewer button few times.

I could simulate it on Edge and Chrome.

Pay attention to the two tabs after the tab title "Sem títlulo". They opened the PDF file perfectly. However, the tab with the title "Sem título" did not open the PDF.

EDIT

I'm using google docs viewer .

Why Google Viewer sometimes is opening a blank page instead of open the PDF file?

I could simulate it using this code. It doesn't happen every time. It will be necessary to click on the Google Viewer button few times.

I could simulate it on Edge and Chrome.

Pay attention to the two tabs after the tab title "Sem títlulo". They opened the PDF file perfectly. However, the tab with the title "Sem título" did not open the PDF.

EDIT

I'm using google docs viewer https://docs.google./viewer.

• javascript
• google-chrome
• microsoft-edge
• window.open
• google-document-viewer

• could be a bug the browsers with stalling loading tabs. nothing to do with your code however. – Daniel A. White Commented Jun 25, 2020 at 19:51
• That's what window.open() does... unless you configure it not to with the windowname argument. – Scott Marcus Commented Jun 25, 2020 at 20:19
• 2 @Scott Marcus: I believe the issue is, that the pdf/window itself sometimes is blank, not that it opens in a new tab. Click it a few times and you will see (like each third for me). – Lain Commented Jun 25, 2020 at 20:23

2 Answers 2

I try to test your code on the MS Edge legacy browser, MS Edge (Chromium) browser, Google Chrome browser, and Firefox browser.

I can reproduce the issue on all 4 browsers. So we can say that this is not a specific browser related issue.

I noticed that you are using Google docs viewer to display the PDF.

https://docs.google./viewer?

I try to display the PDF directly in the browser and found that it is working fine in every browser.

Test code:

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

Here is the test results in MS Edge (Chromium) browser.

So it looks like there is some issue with the Google docs viewer. You can try to provide feedback to Google about this issue.

To fix the issue in your code, you can try to directly display the PDF file as I show you in my sample code. You can notice that performance is also better.

For a client with WP and "Embed Any Document" plugin, fixed it by replacing the default link. The plugin generates div.ead-document > div.ead-iframe-wrapper > iframe and with this JS it appends a new link to .ead-document, which is with 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);
            }
        });
    });

and the styling for the 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);
}

You need to play with selectors and may be z-index