HTML iframe 标签

HTML iframe 语法

在 HTML 中，iframe 标签可以在当前网页中嵌入另一个网页。你可以把它理解为一个 “网页中的小窗口”，这个窗口中显示的是另一个网站或页面的内容。

其中，iframe 是 “inline frame（内联框架）” 的缩写。

语法：

<iframe src="页面地址" width="宽度" height="高度"></iframe>

说明：

iframe 标签包含以下属性。除了 src 属性之外，其他都是可选属性。

src（必选） ：要嵌入另一个页面的地址。
width（可选） ：iframe 的宽度。
height（可选） ：iframe 的高度。
title（可选） ：为 iframe 添加描述性文字（有利于无障碍和 SEO）。
allow（可选） ：控制 iframe 中允许使用的功能（如麦克风、全屏等）。
sandbox（可选） ：对 iframe 内容添加额外的安全限制。
loading（可选） ：设置加载策略：当取值为 “eager” 时，表示立即加载；当取值为 “lazy” 时，表示延迟加载。

注意：

HTML 框架只有 iframe 这一个标签，而像 frame、frameset 等标签在 HTML5 中均已被废弃了。
由于 iframe 允许嵌入来自不同源的内容，这可能引入安全风险，比如点击劫持或跨站脚本攻击。因此，强烈建议使用 sandbox 和 allow 这两个属性来限制嵌入内容的权限，防止跨站攻击（如点击劫持、XSS 等）。
除了 iframe 之外，还有两个尚处于实验阶段的标签：fencedframe 和 portal。

HTML iframe 摘要

属于	HTML 框架
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML iframe 示例

接下来，我们通过几个简单的例子来讲解一下 HTML iframe 标签是如何使用的。

示例 1：使用 iframe 嵌入一个页面

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <iframe src="https://www.lvyenet.com" width="400" height="300"></iframe>
</body>
</html>

页面效果如下图所示。

HTML嵌入一个框架

分析：

iframe 实际上就是在当前页面嵌入了另外一个页面，我们也可以同时嵌入多个页面。

示例 2：使用 iframe 嵌入多个页面

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <iframe src="https://www.lvyenet.com" width="400" height="300"></iframe>
    <iframe src="https://www.deepseek.com/" width="400" height="300"></iframe>
</body>
</html>

页面效果如下图所示。

HTML嵌入多个框架

示例 3：使用 iframe 嵌入 B 站视频

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { font-family: sans-serif; text-align: center; }
        h1 { margin-bottom: 20px; }
        iframe {
            border: none;           /* 视频嵌入通常不需要边框 */
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            max-width: 100%;        /* 响应式调整 */
        }
    </style>
</head>
<body>
    <h1>正在观看 B 站视频</h1>
    <iframe width="560" height="315"
            src="//player.bilibili.com/player.html?isOutside=true&aid=1006289395&bvid=BV1Kx4y147dn&cid=1637955042&p=1"
            title="Bilibili video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen
            loading="lazy">
    </iframe>
</body>
</html>

页面效果如下图所示。

使用iframe嵌入B站视频

分析：

使用 iframe 也可以嵌入一个视频。B 站等视频平台通常会提供直接可用的 iframe 嵌入代码，其中包含了视频的 embed URL 和必要的 allow 属性，以确保视频的播放功能（如自动播放、全屏等）正常工作。

loading="lazy" 属性用于优化页面加载性能，只有当用户滚动到视频附近时才加载视频内容。