iframe是唯一能直接、可靠嵌入跨域第三方网页的原生方案，因其不读取内容而是独立渲染；需用绝对路径或带协议url、style设置宽高、必加title属性；遇x-frame-options或frame-ancestors限制时前端无解；高度自适应仅同域可通过postmessage实现，跨域应设固定高度。
iframe 是唯一能直接、可靠嵌入另一个网页（尤其是跨域第三方页面）的原生方案。其他方式要么受限严重，要么根本不可用。
为什么只推荐 iframe？
浏览器明确禁止跨域脚本读取外部网页内容——这是同源策略的硬性限制。fetch、XMLHttpRequest、object 标签在加载第三方网页时，要么被 CORS 拦截，要么返回空白响应但不报错，调试时极难定位。iframe 是唯一绕过该限制的机制，因为它不尝试“读取”内容，而是让浏览器新开一个独立上下文渲染目标页面。
iframe 的 src 必须是完整 URL
写成 src="page2.html" 看似方便，但在跨域或部署路径变动时极易失效。实际使用中必须：
- 同域静态文件：用绝对路径，如
src="/pages/widget.html"（以根目录为基准，避免相对路径解析错乱） - 第三方网页：必须带协议，如
src="https://example.com"；http://会被现代浏览器阻止 - 不要依赖
width="100%" height="400"这类 HTML 属性——它们易被父容器挤压变形；改用style="width:100%; height:500px; border:none;" - 务必加
title属性，例如title="用户协议条款"；这是屏幕阅读器识别 iframe 内容的唯一依据
嵌入后页面白屏？先查这两个响应头
即使 iframe 标签写对了，目标页也可能拒绝被嵌入。打开浏览器开发者工具的 Network 面板，点击该 iframe 请求，检查响应头：
-
X-Frame-Options: DENY或sameorigin→ 页面明确禁止任何或仅同源嵌入 -
Content-Security-Policy: frame-ancestors 'none'或不含你域名 → 同样会静默失败，控制台无错误提示
遇到这两种情况，前端无解，只能联系目标网站管理员修改策略。
想让高度自适应？别信 onload + scrollHeight
iframe.onload 只表示 iframe 元素加载完成，不代表内部文档 DOM 已就绪、样式已计算、JS 已执行完毕。直接读 contentDocument.body.scrollHeight 在跨域下抛 SecurityError，在同域下也常读到 0 或错误值。
真正可行的做法只有两种：
- 同域且可控：在被嵌入页面末尾加一段 JS，调用
parent.postMessage({ type: 'height', value: document.body.scrollHeight }, '*')；主页面监听message事件并设置 iframe 高度 - 第三方页面：放弃自适应，用固定高度 +
overflow:auto，或改用响应式设计预留足够空间（如最小高度min-height: 600px）
没有万能的高度同步方案，强行 hack 容易在 Safari 或新版本 Chrome 中失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
