PHP小码农

Appearance

iframe 内联框架 ​

<iframe>（Inline Frame）用于在当前页面中嵌入另一个 HTML 页面，创建一个独立的浏览上下文。本节将介绍 iframe 的基本语法、属性用法以及在现代 Web 开发中的应用场景。

前置知识

阅读本节前，建议先了解：媒体格式兼容性

基础概念 ​

<iframe> 是 HTML 中用于在当前文档内嵌入另一个文档的元素。被嵌入的页面拥有独立的浏览上下文——它有自己的 window、document、CSS 和 JavaScript 作用域，与父页面相互隔离。

iframe 在现代 Web 中仍有很多合法用途：嵌入第三方内容（如视频、地图）、实现沙盒化的组件、构建微前端架构等。但由于安全考虑，iframe 的使用需要特别注意权限控制。

语法 ​

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>iframe 内联框架</title>
</head>
<body>
  <h1>iframe 基本用法</h1>

  <!-- 最简单的 iframe -->
  <iframe src="https://www.example.com"
          width="600" height="400"
          title="示例网站"></iframe>

  <hr>

  <!-- 嵌入视频 -->
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
          width="560" height="315"
          title="视频播放器"
          allow="accelerometer; autoplay; encrypted-media; gyroscope"
          allowfullscreen></iframe>
</body>
</html>

详细说明 ​

iframe 常用属性 ​

属性说明示例
src嵌入页面的 URLsrc="https://example.com"
srcdoc内联 HTML 文档srcdoc="<h1>Hello</h1>"
width宽度（像素或百分比）width="100%"
height高度height="400"
name框架名称（用于链接 target）name="content"
sandbox安全沙盒限制sandbox="allow-scripts"
allow权限策略allow="camera; microphone"
loading懒加载loading="lazy"
title框架标题（无障碍）title="用户评论"
referrerpolicy引用来源策略referrerpolicy="no-referrer"

srcdoc 属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>srcdoc</title>
</head>
<body>
  <h1>srcdoc 内联 HTML</h1>

  <!-- srcdoc 直接嵌入 HTML 内容，无需外部文件 -->
  <iframe srcdoc="
    <!DOCTYPE html>
    <html>
    <head>
      <title>内联页面</title>
      <style>
        body { font-family: sans-serif; padding: 20px; }
        h2 { color: #4285f4; }
      </style>
    </head>
    <body>
      <h2>这是内联在 iframe 中的页面</h2>
      <p>无需额外的 HTML 文件。</p>
    </body>
    </html>
  " width="400" height="200" title="内联示例"></iframe>
</body>
</html>

iframe 懒加载 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>iframe 懒加载</title>
</head>
<body>
  <h1>iframe 懒加载</h1>

  <!-- 懒加载：进入视口附近时才加载 -->
  <iframe src="https://example.com/widget"
          loading="lazy"
          width="300" height="250"
          title="懒加载的 iframe"></iframe>

  <!-- 立即加载 -->
  <iframe src="https://example.com/critical"
          loading="eager"
          width="300" height="250"
          title="立即加载的 iframe"></iframe>
</body>
</html>

name 属性与 target 配合 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>iframe name</title>
</head>
<body>
  <h1>name 与 target</h1>

  <!-- 链接指向 name="content" 的 iframe -->
  <nav>
    <a href="page1.html" target="content">页面一</a> |
    <a href="page2.html" target="content">页面二</a> |
    <a href="page3.html" target="content">页面三</a>
  </nav>

  <!-- iframe 作为链接的目标 -->
  <iframe name="content" src="page1.html"
          width="100%" height="500"
          title="内容区域"></iframe>
</body>
</html>

响应式 iframe ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式 iframe</title>
  <style>
    /* 响应式 iframe 容器（16:9 宽高比） */
    .responsive-iframe {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9 */
      height: 0;
      overflow: hidden;
    }

    .responsive-iframe iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <h1>响应式 iframe</h1>

  <div class="responsive-iframe">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
            title="视频播放器"
            allowfullscreen
            loading="lazy"></iframe>
  </div>
</body>
</html>

实战示例 ​

嵌入 Google 地图 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>嵌入地图</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .map-container {
      width: 100%;
      height: 400px;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
    }
    .map-container iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <h1>联系我们</h1>
  <p>北京市海淀区中关村大街 1 号</p>

  <div class="map-container">
    <iframe
      src="https://maps.google.com/maps?q=39.9,116.3&z=15&output=embed"
      title="公司位置地图"
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</body>
</html>

注意事项 ​

  • 始终设置 title 属性，用于无障碍访问
  • 使用 iframe 会增加页面复杂度和内存消耗
  • 跨域 iframe 的 JavaScript 交互受到同源策略限制
  • 搜索引擎可能无法索引 iframe 中的内容
  • width 和 height 默认值为 300px 和 150px
  • 过多 iframe 会影响页面性能

最佳实践 ​

  • 使用 sandbox 限制 iframe 的权限
  • 使用 loading="lazy" 对非首屏 iframe 进行懒加载
  • 使用 allow 属性精确控制权限（替代 allow* 属性）
  • 使用 CSS 实现响应式 iframe（padding-bottom 比例法）
  • 为所有 iframe 提供 title 属性
  • 嵌入第三方内容时使用适当的 CSP 策略

下一节

继续学习：iframe 安全属性

参考链接 ​