禁用iframe子页面右键审查元素失败的根本原因是父页面无法跨文档上下文监听iframe事件；同源时须在iframe.onload后通过contentdocument注入capture阶段的contextmenu监听，跨域则必须在子页源码中添加防护。
iframe子页面右键审查元素禁用失败的根源
直接在父页面加 document.addEventListener('contextmenu', e => e.preventDefault()) 对 iframe 内容完全无效——因为 iframe 是独立文档上下文，父页脚本无法跨域或跨上下文监听其内部事件。即使同源，也必须显式访问子页面的 contentDocument，且需等加载完成。常见错误是脚本执行过早、未处理跨域拒绝、或误以为全局监听能穿透 iframe 边界。
同源 iframe：通过 contentDocument 注入 contextmenu 监听
仅当 iframe 与父页同源（协议、域名、端口全一致）时可行。关键点是时机和权限：
- 必须等
iframe.onload触发后再操作，否则contentDocument可能为null - 使用
addEventListener而非赋值oncontextmenu，避免被子页后续脚本覆盖 - 若子页本身已绑定
contextmenu，需确保你的监听器先注册（或用capture: true捕获阶段拦截）
const iframe = document.getElementById('myIframe');
iframe.onload = () => {
try {
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.addEventListener('contextmenu', e => e.preventDefault(), { capture: true });
} catch (e) {
// 跨域时抛 SecurityError，此处静默处理
}
};
跨域 iframe：唯一可靠方案是控制子页源码
父页对跨域 iframe 的 DOM 和事件无访问权，JavaScript 层面无法干预。此时必须在子页 HTML 中自行注入防护：
- 在子页
或底部添加：<script>document.addEventListener('contextmenu', e => e.preventDefault());</script> - 若子页由你控制，可同时加 CSS 防文本选择：
body { user-select: none; -webkit-user-select: none; } - 注意：
user-select: none不影响右键菜单本身，但能阻止“审查元素”后快速选中复制节点
别碰那些看似“彻底”的黑科技
网上流传的“F12 关闭页面”“检测窗口尺寸变化跳转”“debugger 死循环”等方案，实际效果极差且副作用明显：
-
window.onresize检测会误伤移动端横竖屏切换、分屏、浏览器缩放等正常行为 - 频繁
debugger会导致页面卡顿、开发者工具强制暂停，现代浏览器已优化绕过逻辑 - 所有前端屏蔽手段都可被禁用 JavaScript、使用 curl 抓包、或直接查看网络面板资源轻易绕过
真正需要保护的内容，比如视频源地址、敏感接口返回值，从来不该暴露在前端 HTML/JS 中——它们该由服务端鉴权、动态 token、Referer 校验或流式加密来兜底。前端右键限制只是最表层的提示性防护，别把它当安全边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
