Google viewer is opening blank page frequently

Question

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.com/viewer.

Aftersensation

could be a bug the browsers with stalling loading tabs. nothing to do with your code however. – Alary

That's what window.open() does... unless you configure it not to with the windowname argument. – Chacon

@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). – Owings

Answer 1

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.com/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.org/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.

Kristinakristine

It makes sense. I added a test using Microsoft viewer and it worked. I can´t change it at the moment because it opens other extensions. – Aftersensation

I try to search further and it looks like a known issue with the Google docs viewer. I found a similar thread on their support forum. support.google.com/docs/thread/34309483?hl=en You can try to provide your feedback there. – Kristinakristine

Hi, I opened a thread on their support too. I've not received any feedback yet. I upvoted and subscribed there. Thank you. – Aftersensation

Answer 2

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

Valaria