怎么把一个网页嵌进另一个网页？iframe 完整用法与坑

把网页嵌入另一个网页，标准做法是用 <iframe> 标签，把目标地址写进 src 属性：src="https://example.com"。浏览器会在这个框里再加载一次目标页面。本文把写法和几个高频坑一次讲清。

iframe 网页嵌入结构图

你想在自己的页面里放一个地图、一个视频播放器，或者一个第三方的表单，最省事的办法就是网页嵌入——直接把对方页面框进来。但很多人写完发现「框是空的」，或者样式错位、滚动条乱飞。今天这篇文章，编程狮就把 iframe 嵌套的用法和坑讲透，让你少走弯路。

一、先弄清 iframe 到底加载了什么

<iframe> 本质是「页中页」：它会在你的页面里开一个小窗口，浏览器单独为它发起一次请求、渲染一个独立的文档。里面的页面有自己的 DOM、自己的脚本环境，和你的外层页面默认是隔离的。

⚠️ 注意：你只能嵌入「对方允许被嵌入」的页面。很多站点出于安全考虑会禁止被框，强行嵌入只会得到空白或报错，这不是你代码写错了。

如果还没系统学过标签，可以先过一遍 HTML 教程，把常用标签过一遍。

二、方案一：最基础的嵌入写法

最小可用的 iframe，只需要 src 指向目标地址，再加上宽高避免塌成 0 像素。

<iframe
  src="https://www.w3cschool.cn/"
  width="600"
  height="400"
  title="编程狮首页">
</iframe>

上面这段做了什么：浏览器会向 src 发起请求，把返回页面渲染进这个 600×400 的框里。title 不是装饰，它给读屏软件描述这个框的用途，务必写上。语法细节可查 HTML 速查手册。

iframe 嵌入网页三种写法图

三、方案二：用 sandbox 控制权限，更安全

嵌入第三方内容时，默认情况下 iframe 仍有一定能力（如弹窗、表单提交）。加上 sandbox 可以收紧权限，只开放你明确允许的那些。

<iframe
  src="https://example.com/widget"
  sandbox="allow-scripts allow-same-origin"
  title="第三方组件">
</iframe>

嵌入相关的属性不少，先把常用的 src、sandbox、width、height 记牢，再按需翻手册补细节。

想知道每个属性完整的取值，可以查 HTML 参考手册，按标签查所有合法属性。原则是「能不给的权限就不给」，尤其别轻易加 allow-same-origin 又同时 allow-scripts，那会让被嵌入页拿到和你同源的权限。

四、方案三：让 iframe 响应式且不塌高度

固定宽高在手机上要么溢出要么留白。更稳妥的是用 CSS 让 iframe 按比例缩放，高度随内容自适应。

.responsive-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

场景	推荐做法	坑点
嵌入固定尺寸组件	直接写 width/height	手机上可能溢出
需要按比例缩放	`aspect-ratio` + 100% 宽	老旧浏览器不识别该属性
内容高度不固定	用 postMessage 通信设高	需被嵌入页配合，跨域常不可行

想立刻试效果，可以打开 HTML 在线运行，把上面的标签和样式粘进去，缩放窗口看是否自适应。

五、踩坑清单

三个最常翻车的地方，每个给现象、原因和办法。

现象：iframe 框是空的、控制台报被拒绝显示。原因：目标站点用 X-Frame-Options 或 CSP 的 frame-ancestors 禁止被嵌入。解决：这是对方的安全策略，你无法绕过，应改用对方提供的官方嵌入代码或开放 API。
现象：框高度塌成一条线。原因：没设 height，也没用 CSS 撑开。解决：显式给 height，或用容器比例撑开。
现象：内层页面能操作外层、弹窗乱飞。原因：没加 sandbox 限制权限。解决：按需加 sandbox，只放开必要权限。

验证最直接：用你自己可控的页面互相嵌入，确认能正常渲染并缩放；再试着嵌入一个明确禁止嵌入的站点，确认会空白并出现对应安全头提示。预期结果（未在本机执行）是可控页正常显示、受限页被浏览器拦截。

实战：嵌入一个地图或视频播放器

网页嵌入最常见的落地点就是地图和视频。比如把某个公开可嵌入的地图组件用 src 指过去，你的页面就多了一块交互地图，而不用自己接地图 SDK。视频也是同理，很多视频平台提供的「嵌入代码」本质就是一段带 src 的 iframe。

做这类嵌入时，记得给 width、height 和 title，并且内容来自第三方就务必加上 sandbox。不要因为「对方是大厂就不会干坏事」就省略权限控制——嵌入即代表你页面里多了一段别人的代码，收紧权限永远不亏。

嵌入失败时的排查顺序

遇到 iframe 不显示，按这个顺序查最快：先看浏览器控制台有没有 X-Frame-Options 或 frame-ancestors 的拦截提示；再确认 src 地址本身能单独打开、不是需要登录的私有页；最后检查是不是忘记设宽高导致框塌成 0 高。三步走完，大部分「空白框」都能定位到原因。如果确认是跨域被拦，单纯改自己代码没用，只能换用对方提供的官方嵌入方案。

嵌入内容与页面性能

iframe 每多一个，浏览器就多发一次请求、多渲染一份文档，页面会变重。一个页面里塞太多 iframe，首屏加载和滚动流畅度都会受影响。非必要的嵌入尽量懒加载，等用户滚到附近再渲染；地图、视频这类「不一定立刻要看」的内容，用 loading="lazy" 能省不少初始开销。

另外，被嵌入页的脚本如果很重，也会拖慢你的页面。嵌入前最好先单独打开那个地址，看看它本身是不是已经够慢、够卡，再决定要不要框进来。

总结

网页嵌入靠 <iframe> 的 src 指向目标地址，是「页中页」的标准方案。写的时候记得给 title 和尺寸，嵌入第三方内容加 sandbox 收紧权限，并用 CSS 让它在不同屏幕上自适应。最关键的一点：能否嵌入取决于对方是否允许，被拦截时不是你的代码问题。

要点带走：

iframe 是独立渲染窗口，默认与外部隔离；
嵌入第三方务必加 sandbox 限制权限；
对方禁止嵌入时无法绕过，改用官方方案。

下一步可以看看 postMessage 怎么让内外层页面安全通信，把单向嵌入升级成双向协作。

延伸学习

想把这块知识系统补齐，可以按这个顺序来：

先过一遍 HTML 入门课程，把标签与属性体系铺平；
想看真实嵌入实践，翻让 HTML 文件嵌入另一个 HTML 文件；
想边学边练，HTML 基础实战课程适合巩固。

常见问题

Q：为什么我的 iframe 是空白的？

A：最常见的原因是目标站点用 X-Frame-Options 或 CSP 的 frame-ancestors 禁止被嵌入，浏览器会直接拦截。这是对方的安全策略，不是你代码写错，应改用对方提供的官方嵌入方式。

Q：sandbox 是干什么的？

A：sandbox 用来限制被嵌入页面的权限，比如是否允许脚本、表单提交、弹窗等。嵌入第三方内容时加上它，只放开必要的权限，能显著降低安全风险。

Q：iframe 高度怎么自适应内容？

A：固定内容可以用 CSS 的 aspect-ratio 按宽高比撑开；高度随内容变化的情况，理想方案是内外页用 postMessage 通信来动态设高，但这需要被嵌入页配合，跨域场景往往做不到。