【问题标题】：How to embed a Google Drive folder in a website如何在网站中嵌入 Google Drive 文件夹
【发布时间】：2014-01-08 00:54:35
【问题描述】：

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

【问题讨论】：

有没有办法使用<embed> 比<iframe> 更好地自动调整内容？

标签： html google-drive-api embed

【解决方案1】：

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

列表视图

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

网格视图

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

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

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

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

文件夹 ID：
0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

警告需要权限的文件夹

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

【讨论】：

我只是广泛尝试了这个。我的 iframe 中根本没有呈现任何内容。 Google Docs 似乎总是比现在好得多。叹。即使我必须为一个可行的网址支付一点费用，我也会考虑。
这很好用 - 有没有办法只抓取 URL？
这在最新的 Firefox 和 chrome 中运行良好。这里的次要问题是所有文件夹/文档链接都在单独的窗口中打开。有没有办法在同一个 iframe 中浏览驱动器文件夹？有没有办法我们可以使用？
@Doc 当我没有权限时，我曾经得到一个空白的IFRAME。我认为现在好多了，因为会出现一条消息说您需要许可。嵌入式文件夹视图还返回一些按钮来帮助您请求访问或更改帐户。遗憾的是，这些按钮在 IFRAME 中不起作用（至少在我使用的 Chrome 版本中不起作用）。如果您的浏览器允许您在另一个选项卡中打开框架，则可以解决此问题。如果您需要切换帐户才能获得访问权限，原来的嵌入式访问权限不会切换，但您可以使用选项卡式访问。
有没有办法改变排序顺序？

【解决方案2】：

在 IFRAME 中嵌入 Google Drive 目录

Google 云端硬盘文件夹可以嵌入并显示在 list 和 grid 视图中（您可以在其中单击文件或文件夹以在新选项卡上打开它）。为此，只需将 FOLDER-ID 替换为您自己的 in：

列表视图

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

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

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

网格视图

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

获取您的文件夹 ID

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

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

文件夹 ID 为 0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2。

具有 G Suite/Google Apps 域的文件夹

如果您的文件夹是 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>

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

警告需要权限的文件夹

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

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

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

TL;DR

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

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

或者，对于 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>

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

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

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

【讨论】：

有什么办法可以得到一个旋转木马 (>) 箭头键来放大 iframe 的图像？

【解决方案3】：

在撰写此答案时，没有任何嵌入方法可以让用户在不离开网站的情况下在文件夹中导航并查看文件（其他答案中的方法使所有内容都在谷歌驱动器的新选项卡中打开网站），所以我为它制作了自己的工具。要嵌入驱动器，请将以下 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>

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

获取 API 密钥：

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

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

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

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

要获取文件夹 ID：

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

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

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

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

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

【讨论】：

它只显示文本：“浏览文件”
@Chips147 API 密钥或文件夹 ID 可能被错误地复制。或者您尝试显示的特定文件夹可能无法公开查看（共享权限->任何有链接的人都可以查看）

【解决方案4】：

对于企业/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>

【讨论】：