如何在React项目的iframe中启用键盘快捷键（如Ctrl+C）

问题根源 #

嵌入的Google Docs iframe属于跨域资源，浏览器同源策略会限制父页面与iframe的直接交互，同时Google Docs在编辑嵌入模式下可能默认禁用了Ctrl+C快捷键，导致无法正常复制内容。

解决方案 #

1. 切换到Google Docs预览模式 #

将iframe的编辑链接替换为预览链接，预览模式下允许默认的复制快捷键，且同源限制更宽松，是最简便的解决方法。

修改后的代码：

<iframe 
  style={{width:"40vw", height:"100vh"}} 
  src="https://docs.google.com/document/d/1ytCdWClP-fqY21uQ7CHFJFG2d6KIcCtCnnNt_8KQwZo/preview" 
  frameBorder="0" 
  ref={iframeRef} 
/>

2. 父页面监听快捷键并配置iframe权限 #

通过在父页面监听Ctrl/Cmd+C快捷键，配合iframe的剪贴板权限配置，尝试触发浏览器默认的复制行为（前提是用户已在iframe中选中内容）。

代码示例：

import { useRef, useEffect } from 'react';

function GoogleDocsEmbed() {
  const iframeRef = useRef(null);

  useEffect(() => {
    const handleKeyDown = (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
        e.preventDefault();
        // 聚焦到iframe确保选中内容处于当前上下文
        iframeRef.current?.focus();
        // 触发浏览器默认复制操作
        document.execCommand('copy');
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <iframe 
      style={{width:"40vw", height:"100vh"}} 
      src="https://docs.google.com/document/d/1ytCdWClP-fqY21uQ7CHFJFG2d6KIcCtCnnNt_8KQwZo/edit?usp=sharing" 
      frameBorder="0" 
      ref={iframeRef} 
      allow="clipboard-write" // 允许剪贴板写入权限
    />
  );
}

export default GoogleDocsEmbed;

3. 通过Google Docs API直接渲染内容 #

如果前两种方法无法满足需求，可以通过Google Docs API获取文档内容，在React页面中直接渲染，完全规避iframe的跨域限制，复制快捷键也能正常使用。

步骤说明：

• 在Google Cloud控制台创建项目并启用Google Docs API
• 获取API密钥并确保文档设置为可公开访问（或配置用户授权）

简化代码示例：

import { useState, useEffect } from 'react';

function GoogleDocsContent() {
  const [content, setContent] = useState('');
  const docId = '1ytCdWClP-fqY21uQ7CHFJFG2d6KIcCtCnnNt_8KQwZo';
  const apiKey = '你的Google API密钥'; // 替换为实际API密钥

  useEffect(() => {
    fetch(`https://docs.googleapis.com/v1/documents/${docId}?key=${apiKey}`)
      .then(res => res.json())
      .then(data => {
        // 解析文档纯文本内容
        const textContent = data.body.content.reduce((acc, block) => {
          if (block.paragraph?.elements) {
            acc += block.paragraph.elements.map(el => el.textRun?.content || '').join('');
          }
          return acc;
        }, '');
        setContent(textContent);
      })
      .catch(err => console.error('获取文档失败:', err));
  }, []);

  return (
    <div style={{width:"40vw", height:"100vh", overflow:"auto", padding:"1rem"}}>
      <pre>{content}</pre>
      {/* 如需渲染富文本，可将解析后的内容转换为HTML后使用dangerouslySetInnerHTML */}
    </div>
  );
}

export default GoogleDocsContent;

总结 #

• 优先尝试切换预览模式，操作简单且见效快
• 编辑模式下可尝试配置剪贴板权限+监听快捷键
• 追求完全可控性时，使用Google Docs API直接渲染内容

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