直接手写<iframe>标签即可插入，但需满足HTTPS协议、目标页允许嵌入（如无X-Frame-Options: DENY）、配置sandbox与title、用CSS设置宽高、同源才可自适应高度，缺一不可。
直接在 HTML 编辑器里写 <iframe> 标签就能插入，但多数编辑器（如 VS Code、Sublime、Typora 的 HTML 模式）不提供可视化按钮——所谓“插入 iframe”本质是手写代码，关键不在编辑器，而在你写的那一行是否满足现代浏览器的加载条件。
src 必须是 HTTPS 且目标页允许被嵌入
写 src="http://example.com" 会静默失败，Chrome/Firefox/Safari 直接拦截并报 Blocked loading mixed active content。本地开发用 http://localhost 可临时通过，但上线必须真实 HTTPS。
- 目标站没 HTTPS？自己搭 Nginx 反向代理，把
http://target.com映射成你域名下的https://your.com/proxy/target - 目标页返回
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'，再怎么写<iframe>都白屏，控制台错误明确提示来源 - YouTube、Bilibili 提供 embed 地址，是因为它们显式设置了
frame-ancestors；知乎、微信公众号页默认禁止，前端无法绕过
必须加 sandbox 和 title，不能只靠 width/height
sandbox="allow-scripts" 是底线配置：不加等于开放全部权限，嵌入不可信页面可能执行 JS、读 Cookie、弹窗甚至尝试访问父页 DOM；空 sandbox="" 则完全隔离，连脚本都不让跑，第三方内容直接白屏。
-
title不是可选装饰，而是 WCAG 合规刚需，屏幕阅读器靠它识别内容用途，比如title="用户协议条款"，不能写title="iframe"或留空 -
width和height属性已过时，改用style="width: 100%; height: 400px; border: 0; overflow: hidden;"，否则响应式失效、尺寸被父容器挤压 - 移动端建议加
loading="lazy"，避免非首屏 iframe 拖慢主页面渲染
同源 iframe 才能自适应高度，跨域不行
想让 <iframe> 高度随内容撑开？仅限你自己的同源页面（如 src="./report.html"），跨域时 iframe.contentDocument 被浏览器拒绝访问，scrollHeight 读不到。
立即学习“前端免费学习笔记（深入）”；
- 同源下可用 JS 监听
load事件后取iframe.contentDocument.body.scrollHeight，但注意子页body有margin或box-sizing会影响精度 - 更稳的做法是子页主动发
postMessage告诉父页当前高度，双方协作，不依赖 DOM 访问 - 如果只是展示第三方页面（如地图、视频），别硬搞自适应——用固定高度 +
overflow: hidden更可靠
真正容易被忽略的是：你写的那行 <iframe> 只是入口，背后要同时盯住协议、目标站 CSP 响应头、沙箱权限、可访问性 title、以及 fallback 行为设计。少一个，线上就可能静默失败，连错误都不报给你看。
