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.
Share Improve this question edited Jun 30, 2020 at 19:40 Gus asked Jun 25, 2020 at 19:49 GusGus 8961 gold badge8 silver badges25 bronze badges 3- 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
Reset to default 5I 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