Google 文档查看器输出不一致

Question

我有这个问题，允许用户每次单击按钮时查看 pdf 文件。第一次点击时，它给出了 'Access-Control-Allow-Origin' header is present on the requested resource. 错误并且什么都不显示，但是当我再次尝试时，它会工作并且能够使用 google 文档查看器查看 PDF。

PDF 来自 API link 并托管在 storage.googleapis.com 上，我对此没有任何控制权。

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");
});

编辑：由于启用了弹出窗口，因此弹出窗口也无法在移动设备上运行。

Answer 1

我已经通过添加中的代码解决了这个问题。

添加了插件cordova-plugin-inappbrowser which works well with the devices. You can check their documentation here。

它绕过了 Chrome 的弹出窗口拦截器，并且适用于 Android 和 iOS 设备。

$(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 文档查看器输出不一致

Google Docs viewer inconsistent output

javascript

pdf

jquery

html-framework-7