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

Question

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

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

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

起初我尝试使用：

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/..." />

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

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

您是否知道 API 或 google 演示文稿提供的任何东西可以帮助您以编程方式完成简单的下一步？

Answer 1

我没有看到任何类似 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

Answer 2

如果下一个按钮在演示文稿中，您可以在 setOnClickAction 中设置一个条件，请参阅下面的文档，它具有广泛的方法和事件，就像 js google AppScript

Answer 3

您可以查看官方 REST API Google Presentations offer you in: https://developers.google.com/slides/api/reference/rest

它的缺点是需要进行经过身份验证的请求

Answer 4

好的。我找到了一个替代解决方案——我现在正在使用 RevealJS。我可以使用他们的 https://www.slides.com 使用 UI 创建幻灯片，然后我将其下载为 HTML 并嵌入到我的网站中。

他们的“PRO”确实需要每月 14 美元的订阅费，但我最终付了钱，只是为了能够创建我可以控制何时使用下一张幻灯片的幻灯片。

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

Embedding a google presentation inside html + clicking next slide from JS

javascript

iframe

google-slides