Google Docs viewer inconsistent output

Question

I have this issue that allows a user to view the pdf file every time the user's click the button. On the first click, it gives an error of 'Access-Control-Allow-Origin' header is present on the requested resource. and will display nothing, but when I try it again, it will work and able to view the PDF with the google docs viewer.

The PDF came from the API link and was hosted on storage.googleapis.com which I don't have any control in it.

HTML:

<a href="{{document.document}}" class="btn-open-pdf"><i class="icon icon-eye"></i></a>

Framework7/JQuery:

$(document).on('click', '.btn-open-pdf', function() {
   var url = "https://docs.google.com/viewer?url=" + $(this).attr('href');

       window.open(url, "_blank", "location=no,toolbar=no,hardwareback=yes");
});

Edit: Popup won't work on mobile devices too due to Pop-up was enabled.

score 0 · Accepted Answer · answered Sep 07 '17 at 15:51

I have managed to solve the issue by adding this code from https://stackoverflow.com/a/27725432/1878924.

Added the plugin cordova-plugin-inappbrowser which works well with the devices. You can check their documentation here.

It bypasses the Chrome's popup blocker and works well with Android and iOS device.

$(document).on('click', '.btn-open-pdf', function() {
   var uri = $(this).attr('href');
   var isMobile = {
      Android: function() {
         return /Android/i.test(navigator.userAgent);
      },
      iOS: function() {
         return /iPhone|iPad|iPod/i.test(navigator.userAgent);
      }
   };
   var pop = {
       openPopUp: function(urlToOpen) {
           var p = window.open(urlToOpen, "myWindow","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes");            
           try {
              p.focus();   
           } catch (e) {
              alert("Pop-up Blocker is enabled! Please add this site to your exception list.");
           }
       }
   }

   // For Android/iOS platform
   if (isMobile.Android() || isMobile.iOS()) {
       try {
           cordova.InAppBrowser.open(uri, '_system');
       } catch(e) {
           window.open(uri, '_blank');
       }
   } else {
       pop.openPopUp($(this).attr('href'));
   }
});

Google Docs viewer inconsistent output

1 Answers1