5

I am using window.open to open a popup and display a result (PDF) this is working fine with IE/fire fox and the same used to work fine with chrome until not so long ago.

here is a live example, codepen editor seems to work better then stack

This is what I see in chrome: Chrome

This is the code:

function openWindow(winUrl,winName,winParams)
 {
  var win = window.open(winUrl, winName, winParams);
  win.focus();
 }
  
function showInspection(inspectionId){
     alert('inspectionId:' + inspectionId);
     openWindow('http://www.africau.edu/images/default/sample.pdf','fullscreen=no,resizable=yes,scrollbars=auto,menubar=yes,location=0,status=1');
   }
<a download target="_blank" href="javascript:showInspection('1')">
<img title="download1" src="https://cdn0.iconfinder.com/data/icons/bremen/32/phone.png"/>
</a>
<a download target="_blank" href="javascript:showInspection('2')">
<img title="download2" src="https://cdn0.iconfinder.com/data/icons/bremen/32/phone.png"/>
</a>
<a download target="_blank" href="javascript:showInspection('3')">
<img title="download3" src="https://cdn0.iconfinder.com/data/icons/bremen/32/phone.png"/>
</a>

I am not sure why but this code is working fine on eclipse, but not on stackoverflow editor - although chrome show the same symptoms.

UPDATE

I added a codepan that shows the issue

here is a live example

I updated chrome to Version 76.0.3809.87 (Official Build) (32-bit) now it will not show the network error just open a blank window with "about:blank" in the URL

just open a blank window with "about:blank" in the URL

JavaSheriff
  • 7,074
  • 20
  • 89
  • 159
  • 1
    why you don't try `window.open("data:application/pdf," + "http://www.africau.edu/images/default/sample.pdf"); ` like here https://stackoverflow.com/questions/2805330/opening-pdf-string-in-new-window-with-javascript – Chotala Paresh Aug 21 '19 at 15:38

1 Answers1

3

Updated codepen example, opens in 'debug' mode to demonstrate the code running in a more realistic envirnment than normal codepen editor. If you want to edit or see the code, this link opens the editor.

Snippet added below with modifications for quick reference (note this will not work in StackSnippets):

function openWindow(winUrl, winName, winParams) {
  var win = window.open(winUrl, winName, winParams);
  // win.focus();
}

function showInspection(inspectionId) {
  alert("inspectionId:" + inspectionId);
  openWindow(
    "http://www.africau.edu/images/default/sample.pdf",
    "fullscreen=no,resizable=yes,scrollbars=auto,menubar=yes,location=0,status=1"
  );
}

const phoneIcon = document.getElementById('phone')
phoneIcon.addEventListener('click', showInspection)
<a download target="_blank" id="phone">
  <img title="download1" src="https://cdn0.iconfinder.com/data/icons/bremen/32/phone.png" />
</a>
Peter
  • 2,796
  • 1
  • 17
  • 29
  • I put your code in a new codepen because link you added is not working, there is some progress, i see the PDF URL is correct in chrome, but it will not show the content. https://codepen.io/01081980/pen/mdbOLaL – JavaSheriff Aug 21 '19 at 17:39
  • 2
    @user648026, I just confirmed the [codepen link](https://s.codepen.io/peterschussheim/debug/dybOmpx/nqAwvWwNQzPr) from my answer works and opens a new tab with the PDF. Perhaps try again? – Peter Aug 21 '19 at 18:53
  • this link is working in chrome, but i am unable to see the codepen code, all i see is the icon, can you share the link again? – JavaSheriff Aug 21 '19 at 19:00
  • 1
    i thought it was working correctly but its not, its opening the pdf, but still showing download failed network error.,.... – JavaSheriff Aug 21 '19 at 19:44
  • 1
    @user648026 please check out this [screen recording](http://g.recordit.co/2CqXAj0Suz.gif) I made. – Peter Aug 21 '19 at 20:07
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198264/discussion-between-user648026-and-peter). – JavaSheriff Aug 21 '19 at 20:13