时间戳

首页 > 解决方案 > 在 html 中嵌入谷歌演示文稿 + 单击 JS 中的下一张幻灯片

javascript - 在 html 中嵌入谷歌演示文稿 + 单击 JS 中的下一张幻灯片

问题描述

我使用 iframe 在我的网络应用程序中嵌入了一个谷歌演示文稿。

<iframe src="https://docs.google.com/presentation/..." />

这很有效并且很棒，但是我正在尝试以编程方式（使用 JavaScript）按下一步（当我需要转到下一张幻灯片时）。我希望能够根据我的逻辑控制何时调用下一个。

起初我尝试使用：

let iframe = document.querySelector("iframe")
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// get the next button's div
iframeDoc.querySelector(".punch-viewer-navbar-next").click()

但它失败了，只是let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;因为 iframe 限制您使用 JS 访问来自另一个域的内容（我想这就是新的 chrome 版本中发生的情况）

所以我在某个端口后面代理了我的网站和 docs.google，然后做了一个不同的 iframe

<iframe src="https://localhost:7777/presentation/..." />

所以我没有让上面的代码运行的问题——但它没有效果——我看不到结果。

我想我可以继续并理解为什么 iframe click 中的 div 不起作用（可能是安全问题），但这对于我所需要的来说已经听起来太麻烦了。

你知道任何 API 或谷歌演示文稿提供的东西来帮助你以编程方式做一个简单的下一步吗？

标签： javascriptiframegoogle-slides

解决方案

我没有看到任何类似于 API 的东西，但您可以在请求的 url 处附加页码以获取特定幻灯片，例如https://docs.google.com/presentation/.../embed#slide= 9将显示第 9 张幻灯片。因此，您可以使用 javascript 更改 iframe src。

警告：每次更改时它都会重新下载整个幻灯片，所以如果你能找到任何其他方法来做到这一点，它可能会更好。

不幸的是，我看不到从当前显示幻灯片的 iframe 获得反馈的方法，因此我建议使用 rm=minimal 隐藏控件（https://docs.google.com/presentation/.../embed ?rm=minimal#slide=9）并在 iframe 上放置一个遮罩以阻止用户更改您控制之外的幻灯片。

编辑：您也可以检查：https ://developers.google.com/slides

推荐阅读