iframe是唯一能直接嵌入其他站点完整页面的原生方案，但绝大多数外部站点会主动拒绝被嵌入，因其服务器返回X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'，前端无法绕过，需改用官方Widget、oEmbed或后端代理解析。
iframe 是唯一能直接嵌入其他站点「完整页面」的原生方案，但绝大多数外部站点会主动拒绝被嵌入——不是你代码写得不对，是对方服务器返回了 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'。
iframe 加载失败时浏览器实际表现
页面里出现空白区域，控制台报错：
Refused to display '<a href="https://www.php.cn/link/713a33732fcb0db1f284a4c1beda7f60">https://www.php.cn/link/713a33732fcb0db1f284a4c1beda7f60</a>' in a frame because it set 'X-Frame-Options' to 'deny'.不会提示“加载失败”，用户只看到一片白或占位符
-
onload事件不会触发，contentWindow为null立即学习“前端免费学习笔记（深入）”；
检查目标站是否允许嵌入：打开浏览器开发者工具 → Network 标签 → 刷新 iframe → 点击对应请求 → 查看 Response Headers 中是否有
X-Frame-Options或Content-Security-Policy字段即使加了
sandbox、referrerpolicy或loading="lazy"，也改变不了对方拒绝的事实本地文件（
file://协议）下测试iframe会触发跨域拦截，必须用本地服务器（如python -m http.server）
同域 HTML 片段怎么安全注入
如果你要嵌的是自己服务器上的另一个 HTML 文件（比如 header.html、nav.html），fetch + innerHTML 是更可控的选择：
- 创建容器：
<div id="nav-placeholder"></div> - 用 JavaScript 请求：
fetch('nav.html').then(r => r.text()).then(html => { document.getElementById('nav-placeholder').innerHTML = html; }); - 注意：
innerHTML = html不会执行其中的<script>标签，如果需要运行脚本，得手动创建并 append - 若
nav.html含相对路径资源（如./logo.png），这些路径仍以当前页面为基准解析，不是以nav.html所在目录为基准 - 服务端渲染或构建时内联（如 Vite 的
@import插件、PHPinclude）比客户端 JS 注入更可靠，无 FOUC（闪白）问题
object 标签能不能替代 iframe
可以试，但不推荐用于跨站嵌入：
- 写法：
<object data="<a href="https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635">https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635</a>" type="text/html" width="100%" height="500"><p>加载失败</p></object> - fallback 内容（
<p>加载失败</p>）会在加载失败时显示，这点比iframe友好 - 但同样受
X-Frame-Options和 CSP 限制，且部分浏览器（如 Safari）对object加载 HTML 支持不稳定 - 它不支持
sandbox、loading等现代属性，也无法通过 JS 访问其内部 DOM
真正能绕过跨域限制的只有服务端代理（比如用 Node.js 转发请求并去掉响应头中的 X-Frame-Options），但这涉及 SSRF 风险和法律合规问题，不能随便加。
别在 iframe src 里硬塞别人家的域名然后指望它显示出来——先 curl 一下响应头，再决定要不要换方案。
