Html 如何在网站中嵌入 Google Drive 文件夹

How to embed a Google Drive folder in a website

提问by Mori

I have a folder in Google Drive that I'd like to embed in my website. I can't find an embed code or anything documented in Google Drive Help articles.

我想将 Google Drive 中的一个文件夹嵌入到我的网站中。我找不到嵌入代码或 Google 云端硬盘帮助文章中记录的任何内容。

回答by Mori

Google Drive folders can be embedded and displayed in listand gridviews:

Google Drive 文件夹可以嵌入和显示在list和grid视图中：

List view

列表显示

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>

Grid view

网格视图

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Q: What is a folder ID (FOLDER-ID) and how can I get it?

问：什么是文件夹 ID (FOLDER-ID)，如何获取？

A: Go to Google Drive >> open the folder >> look at its URL in the address bar of your browser. For example:

A: 转到 Google Drive >> 打开文件夹 >> 在浏览器的地址栏中查看其 URL。例如：

Folder URL: https://drive.google.com/drive/folders/0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

文件夹网址：https: //drive.google.com/drive/folders/0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

Folder ID:
0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

文件夹 ID：
0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

Caveat with folders requiring permission

注意需要权限的文件夹

This technique works best for folders with public access. Folders that are shared only with certain Google accounts will cause trouble when you embed them this way. At the time of this edit, a message "You need permission" appears, with some buttons to help you "Request access" or "Switch accounts" (or possibly sign-in to a Google account). The Javascript in these buttons doesn't work properly inside an IFRAMEin Chrome.

此技术最适用于具有公共访问权限的文件夹。仅与某些 Google 帐户共享的文件夹以这种方式嵌入时会造成麻烦。在进行此编辑时，会显示一条消息“您需要权限”，其中包含一些按钮可帮助您“请求访问权限”或“切换帐户”（或可能登录 Google 帐户）。这些按钮中的 JavascriptIFRAME在 Chrome中无法正常工作。

Read more at https://productforums.google.com/forum/#!msg/drive/GpVgCobPL2Y/_Xt7sMc1WzoJ

阅读更多https://productforums.google.com/forum/#!msg/drive/GpVgCobPL2Y/_Xt7sMc1WzoJ

回答by Chema

Embedding a Google Drive directory in an IFRAME

在 IFRAME 中嵌入 Google Drive 目录

Google Drive folders can be embedded and displayed in listand gridviews (in which all you can do is click a file or folder to open it on a new tab). To do so, simply replace FOLDER-IDwith your own in:

谷歌云端硬盘文件夹可以嵌入在显示list和grid意见（其中所有你能做的就是点击一个文件或文件夹，打开一个新的选项卡上）。为此，只需将FOLDER-ID替换为您自己的：

List view

列表显示

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>

or without specifying a mode, since list mode is the default:

或者不指定模式，因为列表模式是默认的：

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID" style="width:100%; height:600px; border:0;"></iframe>

Grid view

网格视图

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Obtaining your folder id

获取您的文件夹 ID

The id is the hash (alphanumeric gibberish) after folders/in the URL of the folder. You can see the URL in the address bar of your browser when you open the Drive folder. For example, in:

id 是folders/文件夹 URL 中的哈希（字母数字乱码）。当您打开 Drive 文件夹时，您可以在浏览器的地址栏中看到 URL。例如，在：

https://drive.google.com/drive/folders/0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2 

The Folder ID is 0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2.

文件夹 ID 是0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2。

Folder with G Suite/Google Apps domain

包含 G Suite/Google Apps 域的文件夹

If your folder is part of a Google Apps domain, you can add the domain to the URL to alleviate the permission problems (detailed further ahead):

如果您的文件夹是 Google Apps 域的一部分，您可以将域添加到 URL 以缓解权限问题（后面会详细介绍）：

<iframe src="https://drive.google.com/a/MY.DOMAIN.COM/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Just replace MY.DOMAIN.COMand FOLDER-IDwith your own.

只需将MY.DOMAIN.COM和FOLDER-ID替换为您自己的。

Caveat with folders requiring permission

注意需要权限的文件夹

This technique works best for folders with public access. Folders that are shared only with certain Google accounts can cause trouble when you embed them this way, depending on which Google accounts are active on the user's browser:

此技术最适用于具有公共访问权限的文件夹。当您以这种方式嵌入文件夹时，仅与某些 Google 帐户共享的文件夹可能会导致问题，具体取决于用户浏览器上哪些 Google 帐户处于活动状态：

1. If the user has not logged in to any Google account, then nothingappears in the frame.
2. If the user is logged onto an account without authorisation to access the folder, the frame will contain the message You need permission, with some buttons to Request accessor Switch accounts, but if you click on this last, the frame blanks out.
3. If the user logs into an account without proper permissions, and later adds the authorised account, on loading the embedded Drive Google will resort to the first active account, and the user will see You need permission, unless...
4. If the URL contains a Google Suite domain, and the user is logged into that domain's account, the embedded view will work, even if the user logged to another account first.

1. 如果用户尚未登录任何 Google 帐户，则框架中不会显示任何内容。
2. 如果用户在未经授权的情况下登录帐户以访问该文件夹，则该框架将包含消息您需要权限，并带有一些按钮以请求访问或切换帐户，但如果您最后单击此按钮，该框架将变为空白。
3. 如果用户在没有适当权限的情况下登录帐户，然后添加授权帐户，则在加载嵌入式云端硬盘时，Google 将求助于第一个活动帐户，用户将看到您需要权限，除非...
4. 如果 URL 包含 Google Suite 域，并且用户登录到该域的帐户，则嵌入的视图将起作用，即使用户先登录到另一个帐户。

The blank frames are because Google forbids embedding its login page in an IFRAME (presumably to prevent account stealing), via the X-Frame-Optionsheader, which if set to SAMEORIGINwill cause any well-behaved browser to refuse to load the page if it's not in the same domain (v.g. drive.google.com). You can see this in the developer console of your browser.

空白框架是因为谷歌禁止通过X-Frame-Options标题将其登录页面嵌入 IFRAME（大概是为了防止帐户被盗），如果设置为SAMEORIGIN将导致任何行为良好的浏览器拒绝加载页面，如果它不在同一个域中(vg drive.google.com)。您可以在浏览器的开发者控制台中看到这一点。

TL;DR

TL; 博士

To get a list or grid view of a Drive folder (in which all you can do is click a file or folder to open it on a new tab), use:

要获取 Drive 文件夹的列表或网格视图（您可以在其中单击文件或文件夹以在新选项卡上打开它），请使用：

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

or alternatively, for a Google Suite/Apps Drive:

或者，对于 Google Suite/Apps Drive：

<iframe src="https://drive.google.com/a/MY.DOMAIN.COM/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Replace MY.DOMAIN.COMand FOLDER-IDwith your own; remove #gridto get a detailed file list.

将MY.DOMAIN.COM和FOLDER-ID替换为您自己的；删除#grid以获取详细的文件列表。

For private folders, have your users log to the correct account before loading the page with the embedded folder; if the folder is in a Google Apps domain, you can add the domain to the URL. Else, they must log into the authorised account before any other.

对于私人文件夹，在加载带有嵌入文件夹的页面之前，让您的用户登录到正确的帐户；如果文件夹位于 Google Apps 域中，您可以将该域添加到 URL。否则，他们必须先登录授权帐户。

(this answer is an edit of Mori's, but it was rejected as it changed his intent, somehow)

（这个答案是 Mori 的一个编辑，但它被拒绝了，因为它改变了他的意图，不知何故）

回答by ElDog

For business/Gsuite apps or whatever they call them, you can specify the domain (had problem with 500 errors with the original answer when logged into multiple Google accounts).

对于商业/Gsuite 应用程序或任何他们称之为的应用程序，您可以指定域（登录多个 Google 帐户时，原始答案出现 500 个错误的问题）。

<iframe 
  src="https://drive.google.com/a/YOUR_COMPANY_DOMAIN/embeddedfolderview?id=FOLDER-ID" 
  style="width:100%; height:600px; border:0;"
>
</iframe>

回答by ssy

At the time of writing this answer, there was no method to embed which let the user navigate inside folders and view the files without her leaving the website (the method in other answers, makes everything open in a new tab on google drive website), so I made my own tool for it. To embed a drive, paste the iframe code below in your HTML:

在撰写此答案时，没有嵌入方法可以让用户在不离开网站的情况下在文件夹内导航并查看文件（其他答案中的方法使所有内容都在谷歌驱动器网站的新选项卡中打开），所以我为它制作了自己的工具。要嵌入驱动器，请将下面的 iframe 代码粘贴到您的 HTML 中：

<iframe src="https://googledriveembedder.collegefam.com/?key=YOUR_API_KEY&folderid=FOLDER_ID_WHIHCH_IS_PUBLICLY_VIEWABLE" style="border:none;" width="100%"></iframe>

In the above code, you need to have your own API key and the folder ID. You can set the height as per your wish.

在上面的代码中，您需要拥有自己的 API 密钥和文件夹 ID。您可以根据需要设置高度。

To get the API key:

获取 API 密钥：

1.) Go to https://console.developers.google.com/Create a new project.

1.) 转到https://console.developers.google.com/创建一个新项目。

2.) From the menu button, go to 'APIs and Services' --> 'Dashboard' --> Click on 'Enable APIs and Services'.

2.) 从菜单按钮，转到“API 和服务”-->“仪表板”--> 单击“启用 API 和服务”。

3.) Search for 'Google Drive API', enable it. Then go to "credentials' tab, and create credentials. Keep your API key unrestricted.

3.) 搜索“Google Drive API”，启用它。然后转到“凭据”选项卡，并创建凭据。保持您的 API 密钥不受限制。

4.) Copy the newly generated API key.

4.) 复制新生成的 API 密钥。

To get the folder ID:

要获取文件夹 ID：

1.)Go to the google drive folder you want to embed (for example, drive.google.com/drive/u/0/folders/1v7cGug_e3lNT0YjhvtYrwKV7dGY-Nyh5u [this is not a real folder]) Ensure that the folder is publicly shared and visible to anyone.

1.) 转到您要嵌入的 google 驱动器文件夹（例如，drive.google.com/drive/u/0/folders/1v7cGug_e3lNT0YjhvtYrwKV7dGY-Nyh5u [这不是真正的文件夹]）确保该文件夹是公开共享的并且对任何人可见。

2.) Copy the part after 'folders/', this is your folder ID.

2.) 复制“folders/”后面的部分，这是你的文件夹ID。

Now put both the API key and folder id in the above code and embed.

现在将 API 密钥和文件夹 ID 都放在上面的代码中并嵌入。

Note: To hide the download button for files, add '&allowdl=no' at the end of the iframe's src URL.

注意：要隐藏文件的下载按钮，请在 iframe 的 src URL 末尾添加“&allowdl=no”。

I made the widget keeping mobile users in mind, however it suits both mobile and desktop. If you run into issues, leave a comment here. I have attached some screenshots of the content of the iframe here.

我让小部件牢记移动用户，但它适合移动和桌面。如果您遇到问题，请在此处发表评论。我在这里附上了一些 iframe 内容的截图。