Google Docsビューアの一貫性のない出力

Question

ユーザーがボタンをクリックするたびにPDFファイルを表示できるようにするこの問題があります。最初のクリックでは'Access-Control-Allow-Origin' header is present on the requested resource.のエラーが表示され、何も表示されませんが、もう一度試してみると、Googleドキュメントビューアで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')); 
    } 
});