View rendered html of html document in new Google Drive

13

4

In the old Google drive—before the material redesign—one could open an HTML document and that would show the source in a modal (pop-up window with an overlay behind it). Then when you pressed open from there, it rendered the html.

In the new Google drive can I view my HTML rendered in any way? In other words host a static website in Google Drive?

Right now it just lets me view the source or edit it with extensions. I want to view the render. The actual webpage.

irfan

Posted 2014-09-18T21:47:20.053

Reputation: 131

Answers

7

At the moment, they've gotten rid of the ability to preview HTML files from the Drive interface, but you can still view or host HTML files that are in public folders as follows:

  1. Open the (publicly shared) folder you want to share from the Google Drive interface.
  2. Identify the folder URL in your address bar. It'll look something like https://drive.google.com/?authuser=0#folders/0B81vQexWOx6hRDVMQWZTekx4Umc
  3. Replace https://drive.google.com/?authuser=0#folders/ with "googledrive.com/host/"
    • Your new URL will look something like this: http://www.googledrive.com/host/0B81vQexWOx6hRDVMQWZTekx4Umc

If you have an index.html file, this link will take you to the live page, otherwise, you'll be taken to the folder's public HTML view.

If you want to view a specific file in the folder, you can add its filename to the end of the URL like this: http://www.googledrive.com/host/0B81vQexWOx6hRDVMQWZTekx4Umc/chromedock.html

These links will be publicly usable.

I created a bookmarklet to automate the process of finding the public links for files and folders. Feel free to create a new bookmark (call it something like "Host from Google Drive") and paste the following code in as the URL:

This is an updated version of the bookmarklet that works with Google Drive's new folder URL structure.

javascript:var fOlDeR_URL = ""; fOlDeR_URL += document.location; fOlDeR_ref = fOlDeR_URL.split("/"); cLeAn_URL = "http://www.googledrive.com/host/"; cLeAn_URL += fOlDeR_ref[fOlDeR_ref.length-1]; nEw_URL = cLeAn_URL+"/"+prompt("To view the public HTML version of a file within this folder, enter its filename (such as mypage.html) below and hit enter.\n\nTo view the public HTML version of this entire folder (or its index.html, if it exists), just hit enter and you'll be directed to:\n\n"+cLeAn_URL,""); window.open(nEw_URL);

Once you have it bookmarked, just go to the folder you want the public URL for in Google Drive and click the bookmark.

gwistix

Posted 2014-09-18T21:47:20.053

Reputation: 71

Step 3: The URL is not edittable. Has this changed then since the answer was posted? – Russ Bateman – 2014-12-16T17:05:21.703

1If you're doing the three steps, you just change the URL directly from your address bar. Delete the part that says https://drive.google.com/?authuser=0#folders/ and type googledrive.com/host/ instead. It's as editable as any URL. If you're using the bookmarklet, there's no need to edit the URL, since it does it for you. – gwistix – 2014-12-19T18:40:51.043

1One other thing to note: it looks like they've changed the URL file structure, so this now only works for folders inside your main Google Drive folder; it no longer works for folders nested within other folders :( – gwistix – 2014-12-19T18:42:13.290

Actually, it does still work, but you have to replace everything before the final slash, rather than just the https://drive.google.com/?authuser=0#folders/ part.

For example, I have a nested folder with URL https://drive.google.com/drive/#folders/0B81vQexWOx6hSkRCSk9fY2dSSEE/0B81vQexWOx6hRDVMQWZTekx4Umc. My new URL will be http://www.googledrive.com/host/0B81vQexWOx6hRDVMQWZTekx4Umc.

It seems like they're trying more and more to phase this kind of thing out, though. – gwistix – 2014-12-19T18:51:46.120

1I've rewritten the bookmarklet to work with the new folder URL structure, and put the new one in the original posting above, if you're interested. – gwistix – 2014-12-19T18:59:48.770

2Thank! Sadly, it only works in a publicly shared folder. My company use Google Drive and I'd like to share HTML files containing restricted information. I can do this in a presentation, spreadsheet, form, drawing, etc., but I cannot post an HTML document to be rendered by the browser except through this mechanism. Alas. – Russ Bateman – 2014-12-19T22:42:17.217

1

It is possible to add the third party viewing/editing applications to Google Drive now. There is not lack in simple HTML viewers. Try to select "Open with", then "Connect more apps", then search for apps by typing "HTML" in the box provided. The app named (literally) "HTML viewer" serves me fine.

h22

Posted 2014-09-18T21:47:20.053

Reputation: 444

1

If you don't want to share your saved HTML documents publicly, and don't want to install a simple HTML viewer in google docs (they want access to your profile etc.), and are using MacOS or Windows, you can install a native drive app on your computer. Then you can open the files directly and preview them in your OS's browser. Was the best option for me, but certainly won't work for everyone.

Tongfa

Posted 2014-09-18T21:47:20.053

Reputation: 111

0

I have noticed that html files are displayed (more or less correctly) with the Google Drive App on my Android Mobile (https://play.google.com/store/apps/details?id=com.google.android.apps.docs&hl=en). You have to wait a little that the file is loaded. But at least you don't see the html code anymore, you can see the images (at least if you use SingleFile for saving your html files. It might work for others but I didn't test it yet !) and it is readable ! YES !! ;) Alas this does not work (yet?) on my pc with Google Chrome when trying to open html files from the Google Drive website (https://drive.google.com/drive/my-drive). ;(

Erb

Posted 2014-09-18T21:47:20.053

Reputation: 255