src必须是完整url，本地双击打开因file://协议导致相对路径加载失败；开发需启本地服务，生产环境必须写全https://域名；同域可用相对路径但需确保可直接访问；跨域嵌入须确认对方允许且避免空src或about:blank；sandbox和allow属性不可省略以防范xss与点击劫持。
src 必须是完整 URL，相对路径在本地直接打开会白屏
浏览器对 src 做了严格的协议校验。双击打开 HTML 文件时走的是 file:// 协议，此时写 src="./page.html" 或 src="dashboard.html" 会被拒绝加载，控制台报错 Not allowed to load local resource。
开发阶段必须起本地服务，比如：
-
python3 -m http.server 8000，然后用src="http://localhost:8000/page.html" - 或用 VS Code 的 Live Server 插件、
npx http-server等等
生产环境务必写全协议 + 域名：src="https://example.com/widget.html"，不能省略 https://。
同域嵌入用相对路径没问题，但前提是页面能独立访问
如果目标页和父页同属一个域名（比如都部署在 https://myapp.com/ 下），那 src="/dashboard.html" 或 src="report/index.html" 是合法且推荐的——前提是该路径真能被浏览器直接访问。
常见陷阱：
- 目标 HTML 依赖父页 JS 初始化（比如靠 Vue/React 挂载），它本身没有完整 DOM 结构 → iframe 加载出来是空的
- 目标页用了前端路由（如
/dashboard）但没配服务端 fallback → 返回 404 - 目标页有 CSP 或
X-Frame-Options: DENY响应头 → 被浏览器拦截，控制台报Refused to display ... in a frame
跨域嵌入要确认对方允许，且避免空 src 或 about:blank
嵌第三方页面（如地图、视频、表单）时，src 必须是对方明确支持嵌入的地址，比如：
-
src="https://www.youtube.com/embed/dQw4w9WgXcQ"（YouTube 公开 embed 地址） src="https://docs.google.com/forms/d/e/xxx/viewform?embedded=true"
不要写 src="" 或 src="about:blank" 再用 JS 动态赋值——某些浏览器会提前触发加载，报 net::ERR_UNKNOWN_URL_SCHEME。也不要用 srcdoc 替代真实 src 来绕跨域，它只适用于纯 HTML 片段，无法加载外部脚本或资源。
sandbox 和 allow 属性不是可选项，尤其嵌不可信内容时
哪怕 src 地址看起来“安全”，只要不是你完全可控的同域页面，就该加 sandbox 限制执行权限。例如：
-
sandbox="allow-scripts allow-same-origin"—— 仅当需要同源 JS 交互时才加allow-same-origin（否则默认隔离） -
allow="clipboard-write; geolocation"—— 显式声明所需能力，不写就不给
漏掉 sandbox 可能导致 XSS 或点击劫持；滥用 allow-same-origin 会让跨域 iframe 获得读取父页 DOM 的能力——这是最常被忽略的安全临界点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
