绝大多数外部网站无法用 iframe 正常嵌入，是因为对方服务器通过x-frame-options或content-security-policy响应头明确拒绝，或前端js主动跳转；仅youtube、bilibili、google maps等提供专用embed地址且开放frame-ancestors的服务可成功嵌入。
绝大多数外部网站无法用 iframe 正常嵌入——不是你代码写错了，是对方服务器明确拒绝。能嵌成功的，基本只有 YouTube、Bilibili、Google Maps 这类主动开放 frame-ancestors 的服务。
为什么 iframe src 指向外部网站却白屏或报错
浏览器加载后静默失败，根本原因在目标页的响应头：
-
X-Frame-Options: DENY或SAMEORIGIN（旧标准） -
Content-Security-Policy: frame-ancestors 'none'或'self'（新标准） - 目标页前端 JS 主动检测并跳转：
window.self !== window.top时执行top.location = self.location
打开 DevTools → Network → 找到 iframe 对应请求 → 查 Response Headers，只要出现以上任意一项，就注定失败。知乎、微信公众号文章页、多数 CMS 后台默认都这么设。
哪些外部网站能嵌？怎么找正确地址
能嵌的网站一定提供专用 embed 地址，且其响应头中包含类似 frame-ancestors 'self' https://*.youtube.com' 的白名单声明：
- YouTube：把
watch?v=xxx改成embed/xxx，如https://www.youtube.com/embed/dQw4w9WgXcQ - Bilibili：用
https://player.bilibili.com/player.html?bvid=xxx，别直接嵌video.bilibili.com - Google Maps：必须用“分享→嵌入地图”生成的
iframe代码，不是随便截个 URL - 不提供 embed 地址的网站（如知乎单篇文章），基本没戏，前端无解
iframe 标签必须显式设置的关键属性
只写 <iframe src="https://example.com"></iframe> 在生产环境大概率失效：
-
src必须带完整协议（https://），file://协议下 Chrome 直接拒载 -
width和height必须显式设（如width="100%" height="400"），否则默认 300×150px，内容被裁 -
sandbox必须加，最小安全集是sandbox="allow-scripts"；若需跨域通信才加allow-same-origin（加了等于放弃同源检查） -
title必须加，否则屏幕阅读器无法识别用途 - 边框用 CSS 去：
style="border: 0; overflow: hidden;"，别用已废弃的frameborder="0"
嵌进去了但点不动、滚不了？优先排查这三点
渲染正常但交互失灵，问题往往不在 iframe 标签本身：
- 目标页响应头仍含
X-Frame-Options: DENY或frame-ancestors 'none'—— 前端无法绕过，只能联系对方改配置 - 父页面全局 CSS 泄漏，比如
* { box-sizing: border-box; }会破坏子页盒模型；建议外层容器加overflow: hidden，iframe加style="border: none;" - 移动端 Safari 完全忽略
scrolling属性（HTML5 已废弃）；如需禁滚动，得用 JS 监听touchmove并preventDefault()
真正难的不是写对标签，而是确认对方愿不愿意让你嵌——这个决定权永远在服务端响应头里，前端只能适配，不能突破。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
