我在 iFrame 中使用 Google Drive 时遇到了一些问题。通常,在 iFrame 中使用它无论如何都不是一个好主意,但这是为了教学 Google Drive,学生可以编写一些代码,然后他们可以预览它。
预览需要在 iFrame 中进行,因为这样它就被沙箱化了,并且不会潜在地干扰页面的其余部分。我一直在尝试通过几种不同的方式来做到这一点。我认为这与使用 OAuth iframe 的限制有关,但欢迎其他建议。
这是可以使用的非 iframe 版本。这只是使用我的设置了一个 Google Pickerclient_id
and developer_key
。效果很好。http://sandbox.codeschool.com.s3.amazonaws.com/dart/drive.html http://sandbox.codeschool.com.s3.amazonaws.com/dart/drive.html
尝试#1
如果您尝试在 iframe 中运行相同的脚本,则会出现问题。下面是一个例子:http://sandbox.codeschool.com.s3.amazonaws.com/dart/loader-src.html http://sandbox.codeschool.com.s3.amazonaws.com/dart/loader-src.html
该页面的完整代码是
<iframe height='600' width='800' src='drive.html' sandbox='allow-scripts'></iframe>
谷歌加载程序gapi
加载,并调用auth
回调正确,但脚本无法正确加载。这会导致此代码出现此错误:
gapi.auth.authorize({
'client_id': clientId,
'scope': ['https://www.googleapis.com/auth/drive']
}, handleAuthentication);
未捕获的类型错误:无法调用未定义的方法“授权”
未捕获的类型错误:无法读取未定义的属性“原型”
所以不知何故 Google Drive 说库已加载,但是auth
没有被定义。
尝试#2
而不是通过 iframe 加载所有内容src
,尝试通过 JavaScript 动态创建 iframe 并将内容写入其中。以下是此示例的链接:http://sandbox.codeschool.com.s3.amazonaws.com/dart/loader-js.html 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 错误,而是会在尝试设置开发人员密钥时失败之前继续执行到创建选择器的位置。
This gives an error: "The API developer key is invalid.".
我最初认为这是因为浏览器关键引用设置错误。以下是他们为此开发人员密钥设置的内容:
-
http://sandbox.codeschool.com.s3.amazonaws.com/ http://sandbox.codeschool.com.s3.amazonaws.com/*
- http://*
- *
最后两个实际上只是为了测试。有人对绕过此限制的可能方法有任何建议吗?