Using Google Drive in iFrame does not work

Question

Using Google Drive in iFrame does not work

I'm having problems using Google Drive in iFrame. Normally, using it in an iFrame would not be a good idea anyway, but it's for teaching Google Drive, where a student encodes something and then he can view it.

The preview should take place in the iFrame, because in this way it is isolated and will not interfere with the rest of the page. I tried to do this in several ways. I think this is due to the restriction of using OAuth iframe, but open to other suggestions.

This is where the non-iframe version works. It just sets up Google Picker with client_idand developer_key. It is working fine. http://sandbox.codeschool.com.s3.amazonaws.com/dart/drive.html

Attempt # 1

If you try to run the same script in an iframe, everything goes wrong. Here is an example of this: http://sandbox.codeschool.com.s3.amazonaws.com/dart/loader-src.html

All code for this page.

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

Loads the Google loader gapiand calls the callback authcorrectly, but the script does not load correctly. This gives this error for this code:

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

Uncaught TypeError: cannot call 'authorize' method from undefined Uncaught TypeError: Cannot read the 'prototype' property from undefined

So Google Drive says the library is loaded but authnot detected.

Attempt # 2

, iframe src, iframe JavaScript . : 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- , script , , .

: " API ".