iframe 必须用 .embed-responsive 包裹并设比例类，加 .embed-responsive-item；禁用 backdrop/ESC 关闭，统一用 postMessage 控制，确保 origin 验证与加载时机正确。
iframe 容器必须用 .embed-responsive 包裹
Bootstrap 3/4/5 都提供了 .embed-responsive 工具类，但很多人直接把 <iframe> 往 .modal-body 里一塞就完事，结果在小屏上 iframe 被裁切、宽高失真、滚动条乱跳。根本原因是 iframe 默认不响应式，它只认固定像素值，而模态框宽度是流式的。
正确做法是：用 .embed-responsive 容器套住 iframe，并指定比例类（如 .embed-responsive-16by9），再给 iframe 加 .embed-responsive-item 类。这样容器靠 padding-top 维持比例，iframe 绝对定位撑满，才能随模态框缩放。
-
.embed-responsive必须设在.modal-body内部，不能放在.modal-dialog或外层 div 上 - 如果 iframe 内容是表单或操作密集型页面，建议用
.embed-responsive-4by3（更方正），避免过窄导致按钮挤在一起 - Bootstrap 5 移除了
.embed-responsive的 Sass 变量支持，需手动确认 CSS 是否加载完整（尤其用 CDN 时）
高度控制不能只靠 height 属性
写 <iframe height="500px"> 是最常见也最危险的做法——它会破坏响应式行为，在 iPad 或折叠屏上直接溢出或留白。模态框自身高度是动态的（比如内容少时自动收缩），硬编码 height 会让 iframe 和父容器脱节。
应该让 iframe 高度由容器驱动，而不是反向控制：
- 移除 iframe 上所有
height和widthHTML 属性（包括style="height:..."） - 确保
.modal-body有明确最大高度（如max-height: 70vh），并设置overflow: hidden - 用 JS 动态调整 iframe 高度时，监听
shown.bs.modal事件后调用dialogInstance.getModalBody().css('height', 'calc(70vh - 80px)')（减去标题栏和 padding） - 若 iframe 页面本身可滚动，记得在 iframe src 页面加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则内部滚动可能失效
跨域 iframe 下 window.postMessage 通信容易失败
很多项目用 iframe 嵌第三方系统（如报表平台、认证页），这时 window.addEventListener('message', ...) 收不到消息，不是代码写错，而是跨域策略或触发时机问题。
关键点在于：父页监听必须在 iframe load 之后注册，且要限定 event.origin；子页发消息前得确认 parent 存在且非 null。
- 不要在模态框
show之前就绑定 message 监听，应在shown.bs.modal回调里执行 - 子页发送时用
window.parent.postMessage('close', 'https://trusted-domain.com')，别用'*'（不安全且现代浏览器会静默丢弃） - 父页收到后调用
dialogInstance.close()前，先检查event.source === iframe.contentWindow，防止伪造消息 - 如果 iframe 加载慢，
postMessage可能被丢，建议子页在window.onload后延时 100ms 再发
关闭按钮与 backdrop 点击冲突导致重复关闭
默认情况下，点击模态框遮罩层（backdrop）或右上角 × 按钮都会触发 hidden.bs.modal，但如果 iframe 里又调用了 postMessage 关闭逻辑，就会出现“关了两次”——界面闪一下、回调执行两遍、甚至报 Cannot read property 'close' of null 错误。
解决思路不是禁用某一种关闭方式，而是统一出口：
- 初始化时设
backdrop: 'static'和keyboard: false，禁用 backdrop 和 Esc 关闭 - 只保留 iframe 内部主动发消息关闭，或模态框底部自定义按钮（如“完成”“取消”）调用
dialogInstance.close() - 在
hidden.bs.modal回调里加防重逻辑：if (dialogInstance.isOpened()) return;（BootstrapDialog）或用标志位let closed = false控制 - 如果必须保留 backdrop 关闭，就在 iframe load 后用
iframe.contentWindow.postMessage('ready', '*')通知父页“已就绪”，再启用 backdrop
真正难的不是让 iframe 显示出来，而是让它在各种屏幕尺寸下不溢出、不拉伸、不卡顿，同时保持父子通信可靠。这些细节在开发时往往被忽略，直到上线后用户在 iPhone 上点不动按钮，或者报表页面在 Chrome 新版里突然变空白——那时再查，多半是 .embed-responsive 没生效，或者 postMessage 的 origin 写错了。
