如何在网站中嵌入Google云端硬盘文件夹

Question

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

Answer 1

Google云端硬盘文件夹可以嵌入并显示在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云端硬盘＆gt;＆gt;打开文件夹＆gt;＆gt;查看浏览器地址栏中的URL。例如：

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

文件夹ID ：
0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

警告文件夹需要许可

此技术最适用于具有公共访问权限的文件夹。仅与某些Google帐户共享的文件夹在以这种方式嵌入时会带来麻烦。在此次修改时，会显示一条消息“您需要获得许可”，其中包含一些按钮，可帮助您“请求访问”或“切换帐户”（或可能登录Google帐户）。这些按钮中的Javascript在Chrome中的IFRAME内无法正常运行。

在https://productforums.google.com/forum/#!msg/drive/GpVgCobPL2Y/_Xt7sMc1WzoJ

了解详情

Answer 2

在IFRAME

中嵌入Google云端硬盘目录

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

列表视图

<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帐户处于活动状态：

1. 如果用户尚未登录任何Google帐户，则框架中会显示无。
2. 如果用户未经授权登录帐户访问该文件夹，该框架将包含消息您需要权限，其中包含请求访问或<的一些按钮em>切换帐户，但是如果你最后点击这个，框架就会消失。
3. 如果用户在没有适当权限的情况下登录帐户，并且稍后添加了授权帐户，则在加载嵌入式云端硬盘时，Google将使用第一个有效帐户，用户将看到您需要权限 ，除非......
4. 如果网址包含Google套件网域，并且该用户已登录该域帐户，则即使用户首先登录其他帐户，嵌入式视图也会正常工作，。< / LI>

   空白帧是因为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的编辑，但它被拒绝了，因为它改变了他的意图，不知何故）

Answer 3

对于商家/ 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>

Answer 4

在编写此答案时，没有嵌入方法，该方法可以让用户在不离开网站的情况下浏览文件夹并查看文件（其他答案中的方法使所有内容都在Google驱动器的新标签页中打开网站），因此我为此制作了自己的工具。要嵌入驱动器，请在HTML中粘贴以下iframe代码：

<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.google.com/drive/u/0/folders/1v7cGug_e3lNT0YjhvtYrwKV7dGY-Nyh5u [这不是真实文件夹]）确保该文件夹公开共享给所有人。

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

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

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

我制作了该小部件，牢记移动用户，但是它既适合移动设备，也适合桌面设备。如果遇到问题，请在此处发表评论。 我在此处附加了一些有关iframe内容的屏幕截图。