Question

我有这个问题，允许用户每次用户点击按钮时查看pdf文件。在第一次点击时，它会给出'Access-Control-Allow-Origin' header is present on the requested resource.的错误，并且不会显示任何内容，但是当我再次尝试时，它将起作用并能够使用google docs viewer查看PDF。

PDF来自API链接，托管在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

我已设法通过添加https://stackoverflow.com/a/27725432/1878924中的此代码来解决此问题。

添加了适用于设备的插件cordova-plugin-inappbrowser。您可以查看他们的文档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文档查看器输出不一致

1 个答案: