子页面无法直接触发父页面原生键盘事件，必须通过postMessage发送结构化数据，父页面监听后手动构造并派发KeyboardEvent；跨域时须严格校验event.origin，同域也需focus目标元素并确保bubbles:true，否则无法真实模拟用户按键行为。
子页面调用 parent.postMessage() 发送键盘事件数据
iframe 子页面无法直接触发父页面的原生 keydown 或 keyup 事件（跨域或同域都受 DOM 隔离限制），必须走通信机制。最可靠、标准的方式是用 postMessage() 主动发送结构化数据，由父页面监听并手动派发事件。
子页面需确保知道父窗口引用（parent 或 window.parent），且仅在同源或已授权跨域场景下可用（跨域时需校验 event.origin）：
document.addEventListener('keydown', (e) => {
parent.postMessage({
type: 'KEYDOWN',
key: e.key,
code: e.code,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
altKey: e.altKey,
metaKey: e.metaKey
}, '*'); // 同源可写 '*'；跨域请替换为确切父页 origin
});
父页面用 window.addEventListener('message', ...) 接收并还原事件
父页面不能依赖自动转发，必须自己解析消息、构造 KeyboardEvent 并 dispatchEvent() 到目标元素（比如 document 或某个输入框）。否则只是“收到消息”，不是“触发了键盘事件”。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
KeyboardEvent构造函数在部分旧浏览器（如 IE11）不支持，需降级用document.createEvent('KeyboardEvent')+initKeyboardEvent（已废弃但兼容性好） - 必须指定
bubbles: true才能让事件冒泡到document级别 - 若想让事件作用于特定输入框，需先
focus()它，再 dispatch
window.addEventListener('message', (e) => {
if (e.data.type !== 'KEYDOWN') return;
const event = new KeyboardEvent('keydown', {
key: e.data.key,
code: e.data.code,
ctrlKey: e.data.ctrlKey,
shiftKey: e.data.shiftKey,
altKey: e.data.altKey,
metaKey: e.data.metaKey,
bubbles: true
});
// 派发到 document，模拟全局按键行为
document.dispatchEvent(event);
});
同域 iframe 可用 contentWindow 直接访问，但仍有局限
如果 iframe 和父页同源，父页面可通过 iframeEl.contentWindow 获取子窗对象，反过来子页也能用 parent 访问父窗全局对象——但这不等于能绕过事件模型。你依然不能用 parent.document.dispatchEvent(new KeyboardEvent(...)) 让父页“真实响应”快捷键（比如 Ctrl+S 触发保存），因为浏览器对某些组合键有特殊拦截逻辑，且事件 target 必须是聚焦元素。
常见误区：
- 误以为
parent.document.body.focus(); parent.document.dispatchEvent(...)就能激活快捷键 —— 实际上多数浏览器会忽略非用户直接触发的Ctrl+S、F5等系统级事件 - 在子页里直接调用
parent.someHandler()执行业务逻辑，而非模拟事件 —— 这可行，但不属于“发送键盘事件”，只是函数调用 - 忽略
e.preventDefault()在子页的原始事件中未调用，导致子页自身也响应了按键（比如输入框插入字符）
跨域 iframe 的 postMessage 必须校验 origin
安全起见，父页面监听 message 时不能无条件信任 e.data。尤其当子页来自第三方域名，恶意脚本可能伪造消息。
正确做法：
- 父页检查
e.origin === 'https://trusted-subdomain.example.com'，而不是只看e.source - 子页发送时把
*换成明确的父页 origin（如https://main.example.com），避免被中间人劫持 - 若子页 origin 不确定（比如嵌入多个不同来源的微前端），建议加签名字段或 token 校验，而非仅靠 origin
真正难的不是传数据，而是让父页面“像用户真按了一样”响应——这取决于你想模拟的是普通输入（容易）、焦点切换（需 focus() 配合）、还是浏览器级快捷键（基本不可靠）。别指望用 iframe 透传 F12 或 Alt+Tab，那已经超出 Web API 范围了。
