<iframe>是唯一原生支持跨域嵌入第三方完整网页的方案，因其创建独立浏览上下文，保障脚本、样式、Cookie隔离；需设src（完整URL）、style控制尺寸、title提升可访问性，且须注意目标页可能通过X-Frame-Options或CSP拒绝嵌入。
直接用 <iframe> 加载第三方网页
绝大多数情况下，<iframe> 是唯一能跨域嵌入第三方完整网页的原生方案。它不依赖 JavaScript，浏览器兼容性好，且自带独立上下文——对方页面的脚本、样式、Cookie 都不会污染你的主页面。
关键点：必须有 src，推荐用 style 控制尺寸，title 不可省略。
-
src必须是完整 URL（如https://map.baidu.com），不能是相对路径（除非同域） - 避免写
width="100%" height="400"这类 HTML 属性，它们易被父容器挤压或响应失效；改用style="width:100%; height:500px;" -
title不是装饰，而是屏幕阅读器识别内容的唯一依据，例如title="百度地图门店位置" - 若目标页返回
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'，iframe 会空白，无报错提示
示例：
<iframe src="https://map.baidu.com" style="width:100%; height:500px; border:none;" title="门店位置地图"></iframe>
为什么 <object> 和 <embed> 不适合嵌第三方网页
<object> 虽支持 data 属性加载 HTML，但现代浏览器对跨域 HTML 的支持极不稳定；<embed> 则基本不支持 HTML 内容，主要用于 PDF、SVG 等资源。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：页面显示为空白，控制台无报错，network tab 中请求状态为 200 但响应体未渲染。
-
<object data="https://example.com" type="text/html"></object>在 Chrome/Firefox 中多数失效 - 即使成功，也无法启用
sandbox或referrerpolicy等安全控制 - 不支持
loading="lazy"，无法优化首屏性能
想交互？别指望 iframe 默认通信能力
iframe 与父页默认完全隔离。想传数据、调用函数、监听加载完成，必须双方主动配合，且受同源限制。
- 同域时可用
window.frames[0].postMessage()+window.addEventListener('message') - 跨域时，对方页面必须显式调用
parent.postMessage()，且你需校验event.origin -
iframe.contentWindow在跨域下为null，读取document或设置src会触发 SecurityError - 不要尝试用
iframe.onload判断第三方页是否“真正可交互”——它只表示 iframe 元素加载完毕，不保证内部 JS 执行完成
安全配置不是可选项，而是上线前提
嵌第三方网页等于把执行权部分交给对方。不加防护，就等于开放 XSS、点击劫持、隐私泄露入口。
- 强制启用沙箱：
sandbox="allow-scripts allow-same-origin"—— 仅按需放开权限，不加参数则完全禁用脚本和 DOM 访问 - 禁止传递来源信息：
referrerpolicy="no-referrer"，防止泄露你页面的 URL 结构 - 延迟加载非首屏内容：
loading="lazy"，减少初始请求数和带宽占用 - 禁用滚动条干扰体验：
style="overflow:hidden;"（不是已废弃的scrolling="no"）
真正容易被忽略的是：哪怕你写了所有安全属性，只要对方页面自己设置了 document.domain 或用了 document.write，仍可能绕过部分限制。所以嵌入前务必确认对方是否提供官方 embed 支持（如 Bilibili、YouTube 都有标准 iframe 分享代码）。
