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

rdlzhqv9  于 2023-06-20  发布在  Go
关注(0)|答案(4)|浏览(163)

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

mwecs4sa

mwecs4sa1#

更新

我刚刚写了一个blog post,并创建了一个嵌入式代码生成器,使您的生活更轻松。
1.转到您的Google Drive。
1.右键单击文件夹。
1.选择【共享】。
1.打开【常规访问】下拉菜单。
1.选择任何有链接的人以发布您的文件夹。
1.单击【复制链接】,然后单击【完成】。
你会得到一个如下的URL:
https://drive.google.com/drive/folders/1qGwpjmQIQO8rN1odas0njDSf72VRrTCa?usp=sharing
您可以看到文件夹ID以粗体显示:* * 1qGwpjmQIQO8rN1odas0njDSf72VRrTCa *

  1. Google云端硬盘文件夹可以嵌入并显示在listgrid视图中。将文件夹ID放入以下iframe源之一:

列表视图

<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>
izkcnapc

izkcnapc2#

在IFRAME中嵌入Google Drive目录

Google云端硬盘文件夹可以嵌入并显示在listgrid视图中(您所能做的就是单击文件或文件夹以在新选项卡上打开它)。要做到这一点,只需将 FOLDER-ID 和私人文件夹(自2022年起)RESOURCE-KEY 替换为您自己的文件夹:

列表视图

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

或者不指定模式,因为列表模式是默认模式:

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

网格视图

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

获取您的文件夹id

您只需在标准驱动器共享链接中将drive/folders/替换为embeddedfolderview?id=即可。
id是文件夹URL中folders/之后的散列(字母数字乱码)。打开“驱动器”文件夹时,您可以在浏览器的地址栏中看到该URL。复制后,您可以在共享链接中找到资源密钥。例如,在:

`https://drive.google.com/drive/folders/0B9s5Ht8qysnFMXhaZDFfQlJEalE&resourcekey=0-in7UrBAlXKTSN6poaUSl9g`

文件夹ID为0B9s5Ht8qysnFMXhaZDFfQlJEalE,资源密钥为0-in7UrBAlXKTSN6poaUSl9g

G Suite/Google Apps域名文件夹

自2022年引入Resource Key参数以来,截至2023年1月,嵌入G Suite域文件夹失败,并出现403错误(“很抱歉,您无权访问此页面。这就是我们所知道的一切”)。以下内容仅供参考,以防他们在某个时候修复它。
如果您的文件夹是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.COMFOLDER-ID 替换为您自己的。

需要权限的文件夹注意事项

此技术最适用于具有公共访问权限的文件夹。仅与某些Google帐户共享的文件夹在以这种方式嵌入时可能会导致问题,具体取决于用户浏览器上的Google帐户:
1.如果用户没有登录到任何Google帐户,则框架中不会显示任何内容。
1.如果用户在没有授权的情况下登录到帐户以访问文件夹,则框架将包含消息 * 您需要权限 *,以及一些按钮 * 请求访问 * 或 * 切换帐户 *,但是如果您单击最后一个,则框架空白。
1.如果用户在没有适当权限的情况下登录帐户,然后添加授权帐户,则在加载嵌入式Drive时,Google将诉诸于第一个活动帐户,用户将看到 * 您需要权限 ,除非...
1.如果URL包含Google Suite域,并且用户已登录到该域的帐户,则嵌入式视图将起作用,
即使用户先登录到另一个帐户 *。
空白框是因为Google禁止通过X-Frame-Options头部将其登录页面嵌入IFRAME(可能是为了防止帐户被盗),如果设置为SAMEORIGIN,则会导致任何行为良好的浏览器拒绝加载页面,如果它不在同一个域中(例如,如果它不在同一个域中),则会导致页面丢失。drive.google.com)。您可以在浏览器的开发人员控制台中看到这一点。

TL;DR

要获取“驱动器”文件夹的列表或网格视图(在其中,您所能做的就是单击文件或文件夹以在新选项卡上打开它),请用途:

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

对于Google Suite/Apps Drive,自2023年1月起,以下内容将被破坏:

<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.COMFOLDER-ID 替换为您自己的;删除#grid以获得详细的文件列表。
对于私人文件夹,在加载包含嵌入文件夹的页面之前,请让您的用户登录到正确的帐户;如果文件夹位于Google Apps域中,则可以将域添加到URL。否则,他们必须在任何其他帐户之前登录授权帐户。
(this答案是编辑森的,但它被拒绝,因为它改变了他的 * 意图 *,不知何故)

jexiocij

jexiocij3#

在写这个答案的时候,没有方法可以让用户在文件夹内导航并查看文件而不离开网站(其他答案中的方法,使所有内容都在Google Drive网站的新标签中打开),所以我为它做了自己的工具。要嵌入驱动器,请将以下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和服务”->“ Jmeter 板”->单击“启用API和服务”。
3.)搜索“Google Drive API”,启用它。然后转到“凭据”选项卡,并创建凭据。保持API密钥不受限制。
4.)复制新生成的API密钥。

    • 获取文件夹ID:**

1.)转到您要嵌入的Google Drive文件夹(例如,www.example.com [这不是一个真正的文件夹])确保该文件夹是公开共享的,并且对任何人都可见。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.
2.)复制'folders/'后面的部分,这是您的文件夹ID。
现在将API密钥和文件夹ID放入上述代码中并嵌入。

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

要隐藏文件的下载按钮,请在iframe的src URL末尾添加'& allowdl = no'。
我做的小部件保持移动用户的想法,但它适合移动和桌面。如果你遇到问题,在这里留下评论。我在这里附上了iframe内容的一些截图。

gkn4icbw

gkn4icbw4#

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

相关问题