iframe 加载后，其内部文档默认未获得焦点，导致 addEventListener('keydown') 无法响应键盘事件；通过 JavaScript 在 iframe 加载完成时主动调用 contentWindow.focus()，可使其获取焦点并启用键盘事件监听。
iframe 加载后，其内部文档默认未获得焦点，导致 `addeventlistener('keydown')` 无法响应键盘事件；通过 javascript 在 iframe 加载完成时主动调用 `contentwindow.focus()`，可使其获取焦点并启用键盘事件监听。
在 Web 开发中，嵌入 iframe 是复用外部页面逻辑的常见方式。但一个典型痛点是：iframe 内部注册的 keydown（或 keyup、keypress）事件监听器，在页面初次加载后并不立即生效——必须用户手动点击 iframe 内容区域才能触发。这是因为浏览器的安全策略规定：只有获得焦点（focused）的文档上下文，才可接收键盘事件。
根本原因在于，iframe 的 contentWindow 默认处于“非活动”状态，即使其 document 已就绪（DOMContentLoaded），也未被赋予输入焦点。因此，即便内部 JS 正确执行了 document.addEventListener('keydown', ...)，事件仍会被忽略。
✅ 正确解决方案是在 iframe 完全加载（load 事件触发）后，立即为其 contentWindow 调用 .focus() 方法：
<iframe
id="embedded-app"
name="app-frame"
src="https://example.com/app.html"
width="800"
height="600"
title="嵌入式应用"
allow="clipboard-read; clipboard-write"
></iframe>
<script>
const iframe = document.getElementById('embedded-app');
const focusIframeOnLoad = () => {
try {
// 获取 iframe 的 contentWindow 并聚焦
const win = iframe.contentWindow;
if (win && typeof win.focus === 'function') {
win.focus();
}
} catch (err) {
// 跨域 iframe 会抛出 SecurityError，需静默处理
console.warn('无法聚焦跨域 iframe:', err.message);
}
};
// 注意：必须监听 load 事件（而非 DOMContentLoaded），确保子文档完全加载
iframe.addEventListener('load', focusIframeOnLoad);
</script>⚠️ 关键注意事项：
- load 事件是必要前提：DOMContentLoaded 在父页面触发，不能代表 iframe 子文档就绪；必须监听 iframe 元素自身的 load 事件。
- 跨域限制（Same-Origin Policy）：若 iframe src 与主站不同源（如 https://a.com 嵌入 https://b.com），则 contentWindow 属于受限对象，访问 contentWindow.focus() 将抛出 SecurityError。此时无法通过脚本强制聚焦——这是浏览器强制的安全保护，无绕过方案。唯一可行做法是引导用户首次点击 iframe（即“click-to-focus”交互模式）。
- allow 属性增强兼容性：为支持现代 API（如剪贴板、摄像头等），建议显式设置 allow 属性（如示例所示），尤其在 Chrome 等新版本浏览器中影响聚焦行为。
- 聚焦时机要精准：避免在 iframe 尚未加载完成时调用 focus()，否则可能无效；load 事件已确保 HTML、CSS、JS 及子资源全部就绪。
? 补充技巧：若需在聚焦后进一步确保键盘事件可用，可在 iframe 内部配合使用 document.body.tabIndex = -1 + document.body.focus()（仅同源场景），以强化可聚焦性。
总结：iframe.contentWindow.focus() 是解决“keydown 不触发”问题的标准、轻量且符合规范的方案。开发时应始终结合 load 事件监听，并对跨域场景做好降级提示（如显示“请单击此区域启用键盘操作”）。
