src 是 iframe 唯一强制属性，必须为带协议的完整 URL；同域用 ./ 或 / 开头路径；file:// 协议受限；动态切换建议先清空再赋值；加载失败需查 Network 面板及 X-Frame-Options 等响应头。
src 属性是 iframe 唯一强制要求的属性，没有它，iframe 就不会加载任何内容——哪怕宽高、title 都写全了也没用。
src 必须是有效可访问的 URL，且协议不能省略
常见错误是写成 src="www.example.com" 或 src="/page.html"，这会导致 404 或跨域加载失败。浏览器会按当前页面协议拼接路径，比如你在 https://mysite.com 下这么写，实际请求的是 https://mysite.com/www.example.com。
- 外部网站必须带完整协议：用
src="https://example.com"，不是src="www.example.com" - 同域相对路径要带前导斜杠或点：如
src="./dashboard.html"或src="/assets/report.html" - 本地开发时注意 file:// 协议限制：直接双击 HTML 文件打开，
src指向本地文件可能被浏览器拦截（CORS 策略），建议用本地服务器启动
src 动态切换时，iframe 不会自动重载？
给已存在的 iframe 元素 JS 修改 src 属性（比如 el.src = "new.html"）是有效的，但某些旧版 Safari 或特定 sandbox 环境下可能卡住不触发加载。更稳妥的做法是先清空再赋值：
const iframe = document.getElementById("myFrame");
iframe.src = ""; // 清空触发卸载
iframe.src = "https://new-site.com"; // 再赋新值
- 不要依赖
iframe.contentWindow.location.reload()，跨域时会报错 - 如果需要监听加载完成，用
load事件而非onload属性（后者只支持字符串，维护性差） - 注意：频繁切换
src可能触发浏览器资源限流，尤其嵌入多个第三方页面时
src 加载失败时，如何知道原因？
浏览器不会主动抛出错误到全局，但你可以从几个信号判断：iframe 保持空白、控制台出现 CORS / net::ERR_CONNECTION_REFUSED / net::ERR_BLOCKED_BY_CLIENT 等信息，或者 iframe.contentDocument 为 null（跨域或未加载成功）。
立即学习“前端免费学习笔记（深入）”；
- 检查 Network 面板里该
src请求的状态码和响应头（特别是X-Frame-Options和Content-Security-Policy: frame-ancestors） - 目标站设置了
X-Frame-Options: DENY或frame-ancestors 'none'，则无论你怎么写src都无法显示 -
src指向的页面本身有 JS 报错或重定向循环，也会导致 iframe 显示为空白，需单独打开该 URL 排查
真正容易被忽略的不是怎么写 src，而是目标页面是否允许被嵌入——这个决定权完全不在你这边。哪怕 src 语法百分百正确，只要对方加了严格的 frame-ancestors 或 X-Frame-Options，你就只能换方案（比如用后端代理中转，或改用 API + 自行渲染）。
