在iFrame中使用Google云端硬盘无效

Question

我在iFrame中使用Google云端硬盘遇到了一些问题。通常情况下，在iFrame中使用它无论如何都不是一个好主意，但这是用于教授Google云端硬盘，学生可以对其进行编码然后进行预览。

预览需要在iFrame中进行，因为这种方式是沙盒，并且不会潜在地干扰页面的其余部分。我一直试图以几种不同的方式做到这一点。我认为这与使用OAuth和iframe的限制有关，但是对其他建议持开放态度。

这是非iframe版本。这只是使用我的client_id和developer_key设置Google Picker。它工作正常。 http://sandbox.codeschool.com.s3.amazonaws.com/dart/drive.html

尝试＃1

如果您尝试在iframe中运行此相同的脚本，则会出错。这是一个例子： http://sandbox.codeschool.com.s3.amazonaws.com/dart/loader-src.html

此页面的整个代码是

<iframe height='600' width='800' src='drive.html' sandbox='allow-scripts'></iframe>

Google加载程序gapi加载并正确调用auth回调，但脚本未正确加载。这会在此代码中出现此错误：

gapi.auth.authorize({
  'client_id': clientId,
  'scope': ['https://www.googleapis.com/auth/drive']
}, handleAuthentication);

  

未捕获的TypeError：无法调用未定义的方法'authorize'   未捕获的TypeError：无法读取未定义的属性'prototype'

所以谷歌云端硬盘已经加载了库，但没有定义auth。

尝试＃2

而不是通过src从iframe加载所有内容，尝试通过JavaScript动态创建iframe并编写内容。以下是此示例的链接：http://sandbox.codeschool.com.s3.amazonaws.com/dart/loader-js.html基本上是这样的：

iframe = document.getElementsByTagName('iframe')[0];
iframe.sandbox = 'allow-scripts';
doc = iframe.contentDocument;
doc.open();
doc.write(htmlContent());
doc.close();

这似乎让我们更进了一步。在尝试设置开发人员密钥失败时，脚本会向下发展到创建选择器的位置，而不是在授权时获取JS错误。

这会出错：“API开发人员密钥无效。”

我最初认为这是因为浏览器密钥引用设置错误。以下是他们为此开发人员密钥设置的内容：

• http://sandbox.codeschool.com.s3.amazonaws.com/ *
• 的http：// *
• *

最后两个真的只是为了测试。有人对可能的方法有任何建议吗？