React中如何向嵌入的Google Slides iframe发送按键事件？

你遇到的核心问题是跨域iframe的交互限制，以及浏览器对“可信事件”的校验，导致你直接模拟的KeyboardEvent无法被Google Slides的iframe识别：

• 同源策略：Google Slides的iframe和你的主页面属于不同域名，主页面脚本无法直接向跨域iframe发送可被识别的用户交互事件。
• 事件可信性：脚本创建的KeyboardEvent的isTrusted属性为false，而Google Slides的内部事件监听只会响应真实用户操作触发的、isTrusted为true的事件，所以即使你dispatch了事件，也不会触发幻灯片切换逻辑。

而且由于你无法修改iframe内部代码，postMessage这类需要双方配合的方案也不可行。

方案1：通过URL参数控制幻灯片切换（推荐，无需额外权限） #

Google Slides发布后的嵌入链接支持通过URL参数指定当前显示的幻灯片，我们可以利用这一点来实现切换：

1. 维护当前幻灯片页码状态（以React为例）：

import { useState, useRef } from 'react';

function SlidesEmbed() {
  const [currentSlide, setCurrentSlide] = useState(1);
  const slidesRef = useRef(null);
  // 替换成你的Google Slides嵌入URL的基础部分（去掉末尾的参数）
  const baseSrc = "https://docs.google.com/presentation/d/e/XXXXXX/embed";

  // 切换到下一页
  const handleNext = () => {
    // 这里可以根据实际情况设置最大页码，或者先通过API获取总页数
    setCurrentSlide(prev => prev + 1);
  };

  // 切换到上一页
  const handlePrev = () => {
    setCurrentSlide(prev => Math.max(1, prev - 1));
  };

  return (
    <div>
      <button onClick={handlePrev}>上一页</button>
      <button onClick={handleNext}>下一页</button>
      <iframe 
        ref={slidesRef} 
        src={`${baseSrc}?slide=id.p${currentSlide}`} 
        width='100%' 
        height='100%' 
        allowFullScreen={true}
      />
    </div>
  );
}

2. 补充说明：
   • 如果你需要自动获取幻灯片总页数，可以调用Google Slides API（需要配置API密钥和权限），通过幻灯片的ID获取详细信息。
   • 这种方式的优点是完全符合浏览器的安全规则，不需要依赖任何特殊操作，兼容性极强。

方案2：浏览器扩展（仅适合个人/内部使用） #

如果你是给自己的浏览器做增强，或者内部场景使用，可以开发一个简单的Chrome/Firefox扩展：

• 扩展拥有跨域访问iframe内容的权限，可以直接在iframe内部模拟可信的键盘事件。
• 核心思路是在扩展的内容脚本中，监听主页面的点击事件，然后在iframe的上下文中触发真实的键盘事件（扩展中创建的事件可以被标记为可信，或者直接调用Slides内部的切换方法）。

但这种方案不适合公开的Web应用，因为需要用户安装扩展。

再明确一下你原代码的问题：

• slidesRef.current.focus()能让iframe获得焦点，但后续的dispatchEvent创建的事件是非可信事件，Google Slides的内部逻辑会忽略这类事件。
• 跨域环境下，主页面脚本无法直接操控iframe的事件系统，即使事件被dispatch，也无法穿透同源策略的限制被iframe接收处理。

内容的提问来源于stack exchange，提问作者amiregelz