如何在HTML中嵌入外部网页？iframe元素src属性使用详解-html教程-PHP中文网

src 是 iframe 唯一强制属性，必须为带协议的完整 url；同域用 ./ 或 / 开头路径；file:// 协议受限；动态切换建议先清空再赋值；加载失败需查 network 面板及 x-frame-options 等响应头。

如何在html中嵌入外部网页？iframe元素src属性使用详解

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 环境下可能卡住不触发加载。更稳妥的做法是先清空再赋值：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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 + 自行渲染）。