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

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

我想我可以继续理解为什么 iframe click 中的 div 不起作用(可能是安全问题)，但这听起来已经是我需要的一个过于繁琐的解决方案。

您是否知道 google presentation 提供的任何 API 或其他东西可以帮助您以编程方式执行简单的 next？

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 上放置一个 mask 以停止用户无法更改您无法控制的幻灯片。

编辑:您还可以查看:https://developers.google.com/slides