同源 iframe 可直接操作 contentDocument，跨域则触发 SecurityError；必须等待 load 事件后访问，避免重复绑定需清理旧监听；推荐 iframe 内部自行绑定事件并用 postMessage 通信。
iframe内容同源时，直接操作contentDocument
只有同源 iframe 才能安全访问其内部 DOM；跨域会触发 SecurityError，这是浏览器强制限制，无法绕过。
拿到 iframe 元素后，用 iframe.contentDocument 或 iframe.contentWindow.document 获取内部文档对象，再用常规方式绑定事件：
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
const doc = iframe.contentDocument;
if (doc) {
const target = doc.querySelector('#clickable');
if (target) {
target.addEventListener('dblclick', () => {
console.log('双击触发了');
});
}
}
});
- 必须等
load事件后才能访问contentDocument，否则可能为null - 不要在 iframe 尚未加载完成时就调用
querySelector，否则返回null - 如果 iframe 是空的或加载失败，
contentDocument可能不可用，需加判断
iframe异步加载时，避免重复绑定
iframe 的 src 动态设置（比如通过 JS 修改）会触发重新加载，load 事件也会再次触发——若不清理，可能多次绑定同一事件，导致回调执行多次。
- 每次绑定前先用
removeEventListener清掉旧监听（需保存 handler 引用） - 或者在
load回调里先清空目标元素上已有的dblclick监听器：target.replaceWith(target.cloneNode(true))是一种简单但略重的规避方式 - 更稳妥的做法：在 iframe 内部页面自己绑定事件（见下一条），而非从外层 JS 注入
推荐做法：由 iframe 内部页面自行绑定 dblclick
只要你能控制 iframe 加载的 HTML 页面，最干净的方式是在那个页面里直接写事件逻辑，完全避开跨作用域操作的麻烦。
立即学习“前端免费学习笔记（深入）”；
例如，在 iframe 源文件中写：
document.getElementById('myBtn').addEventListener('dblclick', function() {
// 这里可以调用 parent.postMessage 向外通信
parent.postMessage({ type: 'IFRAME_DBLCLICK' }, '*');
});
- 避免外层 JS 对 iframe DOM 的依赖，也规避了加载时机判断问题
- 如需通知父页，用
postMessage安全通信；父页监听message事件即可 - 注意
postMessage的第二个参数别写'*'（存在安全风险），应明确指定源 origin
为什么不能用事件委托代理到 iframe 外层？
iframe 是独立的浏览上下文，它的事件不会冒泡到父文档，document.addEventListener('dblclick', ...) 根本收不到 iframe 内部的点击流。
- 即使给 iframe 元素本身绑
dblclick，触发条件也只是「双击 iframe 的边框区域」，不是里面的内容 - 没有类似
pointer-events: none那种穿透方案能让父文档“看到”子文档事件 - 所有想绕过同源策略、用 CSS 或事件捕获 trick 实现跨 iframe 事件监听的尝试，都会失败
真正卡住的地方从来不是语法，而是同源策略和事件隔离模型——这两个是浏览器设计的硬边界，不是 API 调用顺序或时机的问题。
