如何通过JavaScript获取嵌入iframe的Google幻灯片当前激活页并监听幻灯片切换？

首先得给你浇个冷水：直接用DOM操作监听iframe里的幻灯片切换是行不通的！因为浏览器的同源策略在这儿拦着——你的React应用和Google Slides的iframe属于不同域名，跨域情况下根本没法访问iframe内部的DOM元素，更别说监听里面的切换事件了。

不过别慌，还是有可行方案的，下面给你详细说：

方案一：用Google Slides API来跟踪状态 #

这是最靠谱的官方解决方案，步骤大概是这样：

1. 先搞定API凭据：
   • 去Google Cloud控制台新建一个项目，搜索并启用「Google Slides API」。
   • 根据你的场景创建凭据：如果是访问公开的幻灯片，整个API密钥就行；要是要访问用户的私有幻灯片，得配置OAuth 2.0凭据（还要处理授权流程）。
2. 在React里调用API：
   • 可以用官方的@googleapis/slides npm包，也可以直接用axios发HTTP请求。
   • 先调用presentations.get接口，把这篇幻灯片的所有页面信息拉下来，记好每个页面的ID和顺序。
   • 要是需要实时跟踪页面切换，API本身没提供实时监听的接口，但可以用定期轮询的方式（比如每隔3-5秒调用一次API，注意别超过API的调用次数限制）；或者结合Google Drive的变更通知，但这个主要是感知幻灯片内容的修改，不是演示时的页面切换。
   • 另外，如果是你自己的应用来控制幻灯片切换（比如给用户上一页/下一页按钮），那就更方便了——调用presentations.batchUpdate接口来切换页面，同时在React状态里维护当前页，完全能掌控切换事件。

方案二：放弃iframe，自建演示界面 #

如果项目预算和时间允许，可以不用iframe嵌入，直接用Google Slides API把幻灯片内容拉到React里，自己写演示组件。这样你能完全控制幻灯片的渲染、切换逻辑，监听页面切换、获取当前页简直是小菜一碟。不过这个方案开发成本会高一些，得处理幻灯片的样式、动画这些细节。

备注：内容来源于stack exchange，提问作者akaparadox