如何在 iframe 中嵌入 Google Docs 集合?

Posted

技术标签:

【中文标题】如何在 iframe 中嵌入 Google Docs 集合?【英文标题】:How can I embed a Google Docs collection in an Iframe? 【发布时间】:2012-02-24 13:34:53 【问题描述】:

我有一个想要嵌入到 iframe 中的 Google 文档集合:

https://docs.google.com/open?id=0B6yYgWS-CUJ2ZTUxZGI4MGUtMWM0Yy00YzY0LWIxOTMtMDFlN2RjNDAxNGM2

这里的问题是 Google 设置了 X-Frame-Options 标头,因此他们似乎只允许将此集合嵌入到 Google 网站中:

X-Frame-Options:    SAMEORIGIN

现在我意识到 Google 有时不允许他们的内容在 iframe 中的原因,但这是我觉得有能力这样做会很好的一种情况。

对于文档,Google 还允许两种“共享”方法

    您可以单击“共享”按钮并设置可见性,这将为您提供指向文档的链接 或者您可以点击“发布到网络”,它会为您提供链接或 iframe 选项。

iframe url 与链接 URL 类似,只是它末尾有“&embedded=true”查询变量。谷歌地图也是如此,除了参数是“&output=embed

虽然我认为我无法使用我网站上的标题或 javascript 来允许加载 Google Docs 集合的 iframe 内容,但我希望有人可能知道一种方法来生成嵌入代码允许将其加载到 iFrame 中的 Google Docs 集合。

【问题讨论】:

我认为可以使用代理服务器将 Google Docs 集合嵌入到网页中。见这里:***.com/a/7966754/975097 @AndersonGreen - 把它作为答案,我会接受的。谢谢! 我已经能够使用代理服务器将 Google 搜索放入 iframe 中,但到目前为止,我在使用 Google Docs 时没有运气。通过我尝试的所有代理服务器,我被重定向到代理服务器之外的 Google Docs(即使我尝试从代理服务器内访问 Google Docs)。我将不得不继续尝试 - Google Docs 似乎通过以某种方式重定向代理服务器来绕过代理服务器。 以下是有关可能与 Google 文档一起使用的代理服务器的相关 Google 搜索查询:google.com/… 这应该会有所帮助:How to embed a Google Drive folder in a website 【参考方案1】:

更新:Google 似乎允许通过 iFrame 嵌入 Google Docs/Drive 项目。以下是该页面的当前标题(请注意,此 URL 在重定向之后):

【讨论】:

谷歌似乎只允许你登录。【参考方案2】:

试试这些:-

single - 设置为 true 仅在电子表格中显示一张工作表。它将显示的默认工作表是电子表格中创建的第一个工作表。这可以使用下面的“gid”进行更改。

gid - 这需要是您要显示的工作表的数字标识符。创建的第一个工作表是 0,但其他工作表将具有更长的标识符。要查找要显示的工作表的“gid”,请转到 Google Apps 本身的电子表格,然后单击所需的工作表。浏览器中的 URL 应更改为:https://docs.google.com/a/mycompany.com/spreadsheets/d /15B___SOYjsRmU9tiwZly318HZnFHOHeayS6UTHx7Pu2I/edit#gid=419657423

网址末尾的位向您显示工作表的“gid”,这是您需要带入网站短代码的数字。

range - 将此设置为要在工作表中显示的单元格范围(或将其保留以显示整个工作表)。在我们的示例中,我们将其设置为 f2:g6。请注意,如果您是迂腐的,那么您真的应该将“:”更改为“%3A”,因为冒号应该在 URL 中编码——但大多数浏览器应该理解冒号,所以不用担心。如果您希望正确,可以改用 range=f2%3Ag6。

headers=false - 不显示行号和列字母。

widget – 将此设置为 false 会在嵌入时移除工作表选择器栏。

chrome – 将此设置为 false 会删除工作表上方显示电子表格名称的标题栏。

所以把所有东西放在一起:-

<iframe> src="https://docs.google.com/spreadsheets/d/[Googlekey]/pubhtml?gid=28&range=a1:s45&single=true&widget=true&headers=false" </iframe>

艾伦

【讨论】:

以上是关于如何在 iframe 中嵌入 Google Docs 集合?的主要内容,如果未能解决你的问题,请参考以下文章

如何将Google Form iframe嵌入具有灵活高度的html css(响应式)

在 iFrame 中嵌入 Google Apps 脚本

在 Cordova 3.6 中使用 iframe 和 jquery 移动对话框弹出使用 google doc 查看器显示文档

在 iframe 中嵌入 Firebase 社交登录

从 google-site 上的嵌入式(iframe)片段,引用存储在 google 驱动器上的 json 文件

从父级导航嵌入式 Google Apps 脚本 iFrame