cordova iframe 到 docs.google.com/gview 抛出错误并导致应用程序崩溃

Question

在我的 Cordova 应用程序中，在某些页面上，我加载一个具有 iFrame 的模式来加载/查看外部文档。它有效，但有一些我正在尝试解决的问题。 iFrame 最终加载来自我的服务器的文档

docs.google.com/gview=

 $scope.filePath = "https://docs.google.com/gview?url=" +$scope.serverFileURL+ "&embedded=true" ;

 <iframe id="pdfFrame" ng-src="{{filePath}}" style="width:100%;height:100%;" frameborder="0"></iframe>

问题 1： 模式打开，iframe 将文档加载到视图中。一切看起来都不错。但在后台我收到以下错误：

1. 我收到两次此消息：

   Refused to execute script, violates Content Security Policy directive: "script-src 'report-sample' 'nonce-TPaUqBVHnxjjfUe0rTe09g' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list." 

   - 我该如何解决这个问题？

2. 然后我收到两个 404 错误：

   POST https://docs.google.com/cspreport 404

   在我的应用程序中，我已将

   docs.google.com

   添加到我的白名单中（我无法在 SO 中正确格式化以下内容）：

   config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'https://docs.google.com/**', 'https://content.googleapis.com/**', ... ]) ; })

看起来一切正常，我可以使用 iFrame 关闭并重新打开模式，并且我的应用程序似乎可以继续工作，没有问题。是否可以解决这些错误 - 它们可能会导致问题 #2？

第2期

在 iFrame 中查看文件后，gviewer 会在显示文档的右上角嵌入一个小“弹出”按钮。如果您单击它，它会成功打开一个更大的

breakout

窗口，看起来位于 iFrame 和包含模式之外。然而，这会引发另一组错误：

a.

GET https://content.googleapis.com/drive/v2internal/about?fields=importFormats,kind&key=AIzaSyDVQw45DwoYh632gvsP5vPDqEKvb-Ywnb8 401

b.

GET https://content.googleapis.com/drive/v2internal/apps?fields=items(authorized,chromeExtensionIds,createInFolderTemplate,createUrl,icons(iconUrl,size,category),id,installed,kind,longDescription,name,objectType,openUrlTemplate,origins,primaryFileExtensions,primaryMimeTypes,productId,productUrl,rankingInfo,removable,requiresAuthorizationBeforeOpenWith,secondaryFileExtensions,secondaryMimeTypes,shortDescription,supportsCreate,supportsImport,supportsMultiOpen,supportsTeamDrives,type,useByDefault),kind&languageCode=en-US&key=AIzaSyDVQw45DwoYh632gvsP5vPDqEKvb-Ywnb8 403

c.未捕获的错误，消息如下：

"Did not receive drive#about kind when fetching import map:undefined"

d。第二个未捕获错误似乎是在尝试访问：

www-authenticate: "Bearer    realm=\"https://accounts.google.com/\""    with error message: 

此 API 不支持 API 密钥。预期的 OAuth2 访问令牌或其他身份验证凭据`

然而，在这些错误之后，一切都崩溃了。此突破窗口正在运行

IN

我的应用程序，因为如果我关闭该窗口，它也会关闭我的应用程序。如果我单击设备后退按钮，我会看到一个空白屏幕，并且在 Chrome 开发者工具中，我的应用程序似乎未正确重新启动，从而导致其崩溃。

我该如何处理所有这些问题？

更新#1 我找到了一些对

rm

gviewer 控件的引用，并将其添加到我的 URL 调用中：

https://docs.google.com/gview?url=" +$scope.club.ceFormPath+ "&embedded=true&rm=minimal

- 这样就消除了

404

中的两个

Issue #1

错误....但还没有帮助解决其他问题。

Answer 1

对于遇到此问题的任何人，如果用户单击查看文档（在 iFrame 中）右上角的 gvewier

pop-out

按钮，则没有干净的“退出突破窗口”功能......唯一的方法要关闭突破窗口并返回到您的应用程序，请点击设备

back

按钮。这将返回到您的应用程序，但至少在 Cordova 应用程序中，这将错误地重新加载应用程序，导致其崩溃。

我发现解决这个问题的唯一方法是禁用 iFrame 本身的

pop out

按钮...然后使用一些巧妙的 HTML 来隐藏按钮。

我希望完全删除 pop out

 按钮，但由于 

cross origin

 域问题，我无法访问 iFrame.contentWindow()。

如果有人知道解决方法，请告诉我知道 - 因为我认为完全删除按钮是更干净的方法。

要禁用该按钮并防止其显示：

<div style="position: relative;"> 
   <iframe sandbox="allow-scripts allow-same-origin" src="http://docs.google.com/viewer?url=https://example.com/file.pdf &embedded=true"></iframe>
   <div style="width:40px; height:40px; position:absolute; background:white; right:12px; top: 12px;">&nbsp;</div>
</div>

sandbox

 可防止突破窗口打开。第二个 div 隐藏弹出按钮。