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

Question

我在Google云端硬盘中有一个文件夹,我想将其嵌入到我的网站中.我无法在Google云端硬盘帮助文章中找到嵌入代码或任何内容.

Answer 1

谷歌云端硬盘文件夹可以嵌入在显示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),我该如何获得？

答:转到Google云端硬盘>>打开文件夹>>在浏览器的地址栏中查看其URL.例如:

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

文件夹ID:
0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

警告文件夹需要许可

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

欲了解更多信息,请访问https://productforums.google.com/forum/#!msg/drive/GpVgCobPL2Y/_Xt7sMc1WzoJ

Answer 2

在IFRAME中嵌入Google云端硬盘目录

谷歌云端硬盘文件夹可以嵌入在显示list和grid意见(其中所有你能做的就是点击一个文件或文件夹,打开一个新的选项卡上).为此,只需将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是folders/文件夹的URL 之后的哈希(字母数字乱码).打开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替换为您自己的ID.

警告文件夹需要许可

此技术最适用于具有公共访问权限的文件夹.仅与某些Google帐户共享的文件夹在您以这种方式嵌入时会出现问题,具体取决于用户浏览器上的哪些Google帐户处于活动状态:

1. 如果用户尚未登录任何Google帐户,则框架中不会显示任何内容.
2. 如果用户登录到未经授权访问该文件夹的帐户,则该框架将包含消息" 您需要权限",其中包含" 请求访问"或" 切换帐户"的一些按钮,但如果您单击最后一个,则框架将消隐.
3. 如果用户在没有适当权限的情况下登录帐户,并且稍后添加了授权帐户,则在加载嵌入式云端硬盘时,Google将使用第一个活动帐户,并且用户将看到您需要权限,除非...
4. 如果网址包含Google Suite域,并且用户已登录该域帐户,则嵌入式视图将起作用,即使用户首先登录到其他帐户也是如此.

空白帧是因为Google禁止通过X-Frame-Options标头将其登录页面嵌入到IFRAME中(可能是为了防止帐号窃取),如果设置为SAMEORIGIN将导致任何行为良好的浏览器拒绝加载页面(如果它不在同一个域中) (vg drive.google.com).您可以在浏览器的开发人员控制台中看到这一点.

TL; DR

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

<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

在撰写此答案时，没有嵌入方法可以让用户在不离开网站的情况下导航到文件夹内并查看文件（其他答案中的方法使所有内容都在谷歌驱动器网站上的新选项卡中打开），所以我为此制作了自己的工具。要嵌入驱动器，请将下面的 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.google.com/drive/u/0/folders/1v7cGug_e3lNT0YjhvtYrwKV7dGY-Nyh5u [这不是真正的文件夹]）确保该文件夹是公开共享的并且对任何人都可见。

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

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

注意：这仅适用于您实际上传到 GDrive 文件夹中的文件和子文件夹，不适用于您添加为“快捷方式”的子文件夹。如果子文件夹显示不正确，请下载其内容并将其上传到该特定文件夹内的驱动器。如果您在 Google 云端硬盘中“移动”文件夹，GDrive 会将其添加为“快捷方式”。

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

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