Navigating Google Folders in the embeded iframe - html

I have an iframe embed as follows, which is currently public:
<iframe src="https://drive.google.com/embeddedfolderview?id=0B3gN5-3YYPjHeGlTVjduRnBTVGs#list" width="100%" height="500" frameborder="0"></iframe>
and it will show up in my website, but it will not navigate folders within that iframe, but instead navigate to a new window. Is there a way to make all navigate stay self contained in the iframe?
You can see samples of this at: http://help.realsmart.co.uk/embedding-a-google-drive-folder-in-a-post-or-page/
which shows how to embed a folder. It looks nice, but when navigating into deeper folders, it just navigates away.
Edit Added Fiddle: https://jsfiddle.net/0y4cm891/

Edit on 5 April 2020:
I made a new tool specifically for this purpose. For details and steps, read my answer to this similar question: https://stackoverflow.com/a/61034751/8111094
Old answer:
There are two ways to do this.
If you are using wordpress, you cam simply use the plugin Use Your Drive (its a paid plugin). There are few other similar plugins as well. As far as I have seen, none are free.
Use the Google Drive API, it will require you to write your own app and a google cloud account. Watch this video of a similar use case published by google https://www.youtube.com/watch?v=Z5G0luBohCg

Related

How can I force google docs embedded in iframes to open their links in the same window?

I'm currently making an educational resource with google drive.
I've currently got the "Publish to web" version of the google documents embedded in an iframe in an html document using
<iframe src="https://docs.google.com/document/d/e/2PACX-1vSaUZ2XolOoqc0M12v-VNTTMcz3dIAnAOO9gaCyifoAXhlWiKz114M2QYoQ5d-dNBEsgWDcXahKNMSD/pub" frameborder="0"></iframe>
I've inserted hyperlinks (using the built in hyperlink function) in the google docs, to link to other (published) google docs eg:
https://docs.google.com/document/d/1XnTTbjedXkL3OfeELMwzabeeL4FjnOjarmmWbKb97EY/pub
At the moment, all clicked links are opened in a new tab. This happens whether I link to other google docs, or to external sites. Naturally, this is quite frustrating for navigating the site.
I'd like to have them open either...
in the same iframe
or to another webpage that appears in the same tab (which I could then embed the target document in). I don't really mind which, as long as a new tab isn't created every time someone clicks a link.
I see from similar questions posted that in the past people seem to have had the opposite problem - trying to force the links to open in new tabs, so perhaps something has changed with the way links are handled?
For onlookers, the reason for the varying behavior is due to the query parameter that either is or isn't present as the src value:
You can see that the OP does not have ?embedded=true at the end (after /pub).
<iframe src="https://docs.google.com/document/d/e/2PACX-1vSaUZ2XolOoqc0M12v-VNTTMcz3dIAnAOO9gaCyifoAXhlWiKz114M2QYoQ5d-dNBEsgWDcXahKNMSD/pub" frameborder="0"></iframe>
Google doesn't document the differing functionality very well, but a URL like
https://docs.google.com/document/d/e/2PACX-1vSaUZ2XolOoqc0M12v-VNTTMcz3dIAnAOO9gaCyifoAXhlWiKz114M2QYoQ5d-dNBEsgWDcXahKNMSD/pub?embedded=true
will provide the desired behavior of keeping links opening in-iframe.

Google Sites Drawing Reload

Total noob here with almost zero understanding of Google Apps Script or coding in general.
I was looking for a way to force a reload of a google sites page. This (reload page google apps script) makes it look like that can't be done, so I want to try and reload just the google drawing embedded in the site if possible.
I tried to use a javascript iFrame reload:
window.setInterval("reloadIFrame();", 30000); function reloadIFrame() { document.frames["frameNameHere"].location.reload(); }
But I don't think google sites supports this our I got it wrong somewhere.
I can't figure out what the correct Apps Script would be to force the page to reload(pull from the server) the drawing in question. The code for the drawing looks like this:
img
src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BGoogle+drawing'%3D20'f%5Cv'a%5C%3D0'10'%3D999'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%2211.30.15%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D1000'%3D347'dim'%5C%3D10'%3D10'%3D1000'%3D347'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&sig=0bBZl8MyZOx5b3ykHuUS35Gb8iE"
data-origsrc="1mUFhZeas0mFl52FpqC_EgflRn6P3TixsOxMAXI-_Fgo"
data-type="sketchy"
data-props="align:left;borderTitle:11.30.15;height:350;objectTitle:11.30.15;showBorder:false;showBorderTitle:false;width:1000;wrap:false;" width="1000" height="350"
style="display:block;text-align:left;margin-right:auto;">
It's located in my google drive and I just used the google sites tools to embed it, I didn't code it. The drawing is edited constantly throughout the day and I need the changes to appear while viewing with out requiring a page refresh.
Can anyone help me with where and what code could be used to reload the drawing? Even better would be if I could set an interval (say every 5 minutes) for the refresh. Any help is appreciated.
Thanks
Probably you can create an XML gadget that reloads the Google Sites Page.
Try this one (found quickly)
http://www.k8oms.net/refresh

Google customs maps iframe not working for public

I have created a custom Google map, and follow all instructions like share it to everyone (public) and try to embed on my website via iframe.
Here you can see the iframe:JSFiddle
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=z76-dWS2uqvM.kbKEneg2wOL0" width="640" height="480"></iframe>
It looks ok, when the user is logged-in into the Google account, but if you try to open it in Firefox (logged-out) it returns an empty iframe.
So, when I embed this on my website, people cannot see it. How to make this working, and how to display this multiple pin map to everyone who enters my website?
Unfortunately, this is an old issue which still shows up sometimes. But, try out the steps mentioned in this link. If that doesn't help either, give this a try. And if you're doing this by using the Maps API, this might help. Hopefully one of these helps.

Embed doxygen documentation in another site?

I'm trying to embed doxygen documentation into another website. At the moment I have it embedded with an iframe, but it has the side effect that if I open any of the links in the documentation on a new tab, for example, it will go to the separate linked doxygen page outside of the frame.
The main site also happens to be generated with sphinx, but the breathe extension is not yet ready to automatically organize such complex documentation without manually writing many .rst files.
Also, doxylink reference links such as this link to a file found on the reference page.
It seems the shark machine learning library was able to pull this feat off to some degree with the classlist, but it is difficult to determine the exact technique they used. Plus, their license is GPL which is incompatible with my library's BSD license.
How can I make sure the documentation is always embedded?
Here is how a correctly embedded page should appear:
But some links lead to a page like this:
You are essentially opening a link inside an iframe, and want to open that link in the same iframe. This can be done by:
<iframe src="http://cnn.com/" name="myFrame"></iframe>
<p>
</p>
which will load all links in the same iframe.
Here is my JSFiddle: http://jsfiddle.net/yb82en46/
Sources:
How to open a iframe link within the same iframe? - StackOverflow
You should specify target name of the iframe.
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>www.google.com</p>

opening html from google drive

I have made a page in html5 with css3. It works fine on local (I dont use any server, just doubleclick in the index to open it).
I want to put it in google drive. I have load all the documents needed, but when I try to open the html, I can only see the text (I mean, it is not being executing, I can see just the source code).
Any suggestion?
Not available any more, https://support.google.com/drive/answer/2881970?hl=en
Host web pages with Google Drive
Note: This feature will not be available after August 31, 2016.
I highly recommend https://www.heroku.com/ and https://www.netlify.com/
EDIT: As of August 2016 Google Drive can no longer be used to host static web pages, so this solution no longer works.
Create a new folder in Drive and share it as "Public on the web."
Upload your content files to this folder.
Right click on your folder and click on Details.
Copy Hosting URL and paste it on your browser.(e.g. https://googledrive.com/host/0B716ywBKT84AcHZfMWgtNk5aeXM)
It will launch index.html if it exist in your folder other wise list all files in your folder.
I don't think it is necessary to "host" the content using the way from the accepted answer. It is too complicated for a normal user with limited developing skills.
Google actually has provided hosting feature without using Drive SDK/API, what you need is just few clicks. Check this out:
http://support.google.com/drive/bin/answer.py?hl=en&answer=2881970
It is the same to the answer of user1557669. However, in step 4, the URL is not correct, it is like:
https://drive.google.com/#folders/...
To get the correct host URL. Right click on the html file (you have to finish 1-3 steps first and put the html in the public shared folder), and select "Details" from the context menu. You will find the hosting URL right close to the bottom of the details panel. It should look like:
https://googledrive.com/host/.../abc.html
Then you can share the link to anyone. Happy sharing.
Now you can use
https://sites.google.com
Build internal project hubs, team sites, public-facing websites, and moreā€”all without designer, programmer, or IT help. With the new Google Sites, building websites is easy. Just drag content where you need it.
While drive allows you to edit plain text and HTML files I don't believe they allow the HTML to actually be displayed. I don't think they want people hosting websites from their drive space.
A lot of the solutions offered here do not seem to work anymore. I'm currently on a chromebook and wanted to view an HTML5 banner. This seems impossible now through Google Drive or other apps (as mentioned in previous comments).
The method I ended up using to view the HTML5 was the following:
Open Google Adwords (create a free account if you dont have one)
Click on Ads in the top panel
Click on "+AD" and choose image ad
Choose "upload an ad"
Drag and drop your zip file into the area
Click on Preview
Voila, you will see your HTML5 banners in their full beauty
There may well an easier way, but this way is pretty good too. Hope it helps and worked well for me.
Create a new folder in Drive and share it as "Public on the web."
Upload your HTML, JS & CSS files to this folder.
Open the HTML file & you will see "Preview" button in the toolbar.
Share the URL that looks like www.googledrive.com/host/... from the preview window and anyone can view your web page.
Found method to see your own html file (from here (scroll down to answer from prac): https://productforums.google.com/forum/#!topic/drive/YY_fou2vo0A)
-- use Get Link to get URL with id=... substring
-- put uc instead of open in URL