钟文志的部落格

Appearance

HTML 的 <iframe> 元素用于在当前页面中嵌入另一个 HTML 页面。它常用于嵌入第三方内容，如地图、视频、广告等。以下是关于 <iframe> 的详细介绍和示例。

基本语法 ​

html
<iframe src="URL" width="宽度" height="高度"></iframe>

示例 ​

嵌入 Google 地图 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入 Google 地图</title>
</head>
<body>
    <h2>我的位置</h2>
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345094376!2d144.95373531531865!3d-37.8162797797516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d43f2a79fd7%3A0x5045675218ce7e33!2z5Lit5Zu9!5e0!3m2!1szh-CN!2sau!4v1643051119405!5m2!1szh-CN!2sau" 
        width="600" 
        height="450" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy">
    </iframe>
</body>
</html>

嵌入 YouTube 视频 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入 YouTube 视频</title>
</head>
<body>
    <h2>示例视频</h2>
    <iframe 
        width="560" 
        height="315" 
        src="https://www.youtube.com/embed/tgbNymZ7vqY" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
    </iframe>
</body>
</html>

<iframe> 属性 ​

  • src：嵌入页面的 URL。
  • width：框架的宽度。
  • height：框架的高度。
  • frameborder：设置框架的边框。0 表示没有边框。
  • allowfullscreen：允许全屏显示。
  • loading：设置 iframe 的加载方式，lazy 为懒加载。
  • title：为 iframe 提供一个标题，便于无障碍工具使用。

使用 CSS 样式化 iframe ​

您可以使用 CSS 来控制 iframe 的样式，例如：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式化 iframe</title>
    <style>
        .iframe-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
        }
        .iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    </style>
</head>
<body>
    <h2>自适应 iframe</h2>
    <div class="iframe-container">
        <iframe 
            src="https://www.youtube.com/embed/tgbNymZ7vqY" 
            title="YouTube video player" 
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
        </iframe>
    </div>
</body>
</html>

在上述示例中，通过 CSS 技巧使 iframe 能够自适应其父容器的宽高比，从而实现响应式布局。

注意事项 ​

  1. 跨域安全：嵌入的页面必须允许被嵌入。某些网站出于安全原因设置了 X-Frame-Options 头，禁止其内容被嵌入。
  2. SEO 影响：嵌入的内容不会被搜索引擎索引，因此重要内容不应仅通过 iframe 提供。
  3. 无障碍性：为 iframe 提供合适的 title 属性，帮助无障碍工具理解其内容。

通过使用 <iframe>，您可以在网页中嵌入各种外部内容，为用户提供丰富的交互体验。