应使用精准定位的遮罩层而非禁用body，遮罩需与iframe生命周期严格同步：插入后立即显示、onload/onerror时隐藏或重试，同源时注入脚本拦截链接跳转，跨域则无法拦截。
iframe加载期间禁用父页面交互的常见错误
直接给body加pointer-events: none或opacity: 0.5看似简单，但会同时锁死滚动、焦点切换、键盘输入——用户连关闭弹窗或切到其他 tab 都做不到，体验比卡顿还差。更糟的是，有些框架（如 Vue 的v-if）会在 iframe 加载中销毁又重建 DOM，导致禁用状态丢失。
用 loading 状态 + CSS 层级控制真正可用的遮罩
核心是「只盖住操作区域，不锁死整个页面」。遮罩必须满足三个条件：定位在 iframe 上层、不影响 iframe 自身加载、能随 iframe 生命周期自动启停。
- HTML 中为 iframe 设置唯一
id，并紧跟一个同尺寸的<div class="iframe-overlay"></div>，用 CSS 绝对定位对齐 - 初始隐藏遮罩：
.iframe-overlay { display: none; }；iframe 插入后立即显示：overlay.style.display = 'block'; - 监听
iframe.onload事件，在回调里移除遮罩；若加载失败（如跨域拦截、404），需额外监听iframe.onerror并提供重试按钮 - 遮罩样式建议用
pointer-events: auto+background: rgba(255,255,255,0.01)，既拦截点击又保留滚动穿透，避免 iOS Safari 触摸异常
防止用户误点 iframe 内部链接跳转
仅靠父页面遮罩无法阻止 iframe 内部已渲染的链接点击。如果 iframe 同源，必须注入脚本拦截；如果跨域，则无解——这是浏览器强制限制，不是代码能绕过的。
- 同源时，在
iframe.onload后获取iframe.contentDocument，在其document上绑定捕获阶段 click 事件 - 判断目标是否为可跳转元素：
e.target.matches('a[href]:not([href^="javascript:"]):not([href^="#"])') - 对匹配元素调用
e.preventDefault()，并可选地加e.stopPropagation()防止冒泡干扰父页逻辑 - 跨域 iframe 无法访问
contentDocument，此时控制台会报Blocked a frame with origin错误，必须接受该限制，不能强求拦截
动态 iframe 的加载状态管理容易漏掉的点
很多问题出在生命周期错位：遮罩显示太早、消失太晚、或重复触发。关键不是“有没有遮罩”，而是“遮罩和 iframe 是否严格同步”。
- 不要在
document.createElement('iframe')后立刻显示遮罩——此时 iframe 还没插入 DOM，offsetTop等计算可能为 0，导致遮罩位置错乱 - 不要依赖
setTimeout猜测加载时间，iframe 加载耗时受网络、子页 JS 执行、重定向次数影响极大 - 如果 iframe 有重定向（如 HTTP → HTTPS），
load会触发多次，需用iframe.dataset.loaded = 'true'标记并校验，否则遮罩可能提前消失 - Vue/React 中用
ref或useRef拿到 iframe 实例后，务必检查iframe.contentWindow是否存在再操作，否则postMessage或注入脚本会静默失败
load，以及跨域时对拦截能力的过度预期。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
