探索HTML中的“iframe”标签—

探索HTML中的“iframe”标签——WEB开发系列12

news2024/11/29 0:42:12

现代网页开发中，<iframe> 标签是一个非常重要的工具。允许我们在一个网页中嵌入另一个网页，对于展示外部内容、应用嵌套或实现复杂的布局设计都非常有用。来一起探讨如何使用 iframe 标签，包括设置高度和宽度、移除边框，以及如何用 iframe 来显示目标链接页面。

一、了解 `<iframe>` 标签

<iframe> 标签是 HTML5 中的一部分，用于嵌入另一个 HTML 页面到当前页面中。它的基本语法如下：

<iframe src="URL" width="宽度" height="高度" frameborder="边框"></iframe>

src 属性指定要嵌入的网页的 URL。
width 和 height 属性用于设置 iframe 的宽度和高度。
frameborder 属性用于设置 iframe 的边框宽度。

二、设置 `iframe` 的高度与宽度

使用 <iframe> 标签时，可以通过 width 和 height 属性来控制其显示的尺寸。设置这两个属性的值通常有两种方式：像素值（例如 600px）和百分比值（例如 100%）。

示例 1：固定尺寸的 `iframe`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Size iFrame</title>
</head>
<body>
    <iframe src="https://www.baidu.com" width="800" height="600" style="border: none;"></iframe>
</body>
</html>

在这个示例中，创建了一个宽800像素、高600像素的 iframe。通过在 style 属性中设置 border: none;，去除了边框的显示。

示例 2：响应式 `iframe`

为了使 iframe 自适应容器的宽度，我们可以使用百分比值。下面的示例展示了如何创建一个宽度为页面宽度的100%的 iframe，高度为容器宽度的50%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive iFrame</title>
    <style>
        .iframe-container {
            position: relative;
            width: 100%;
            padding-top: 50%; /* 16:9 aspect ratio */
        }
        .iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <iframe src="https://www.baidu.com"></iframe>
    </div>
</body>
</html>

这个示例中，使用了一个包含 iframe 的容器 div。通过设置容器的 padding-top，能够保持 iframe 的纵横比为16:9，并且使其自适应页面宽度。

三、移除 `iframe` 的边框

默认情况下，许多浏览器会为 iframe 显示边框。可以通过设置 frameborder 属性或使用 CSS 来移除这些边框。

示例 1：使用 `frameborder` 属性

<iframe src="https://www.baidu.com" width="600" height="400" frameborder="0"></iframe>

设置 frameborder 属性为 0 可移除边框。这种方法已被 HTML5 弃用，建议使用 CSS。

示例 2：使用 CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iFrame without Border</title>
    <style>
        iframe {
            border: none;
        }
    </style>
</head>
<body>
    <iframe src="https://www.baidu.com" width="600" height="400"></iframe>
</body>
</html>

这个示例中，通过 CSS 中的 border: none; 去除了 iframe 的边框。这是移除边框的推荐方法，符合现代浏览器的标准。

四、使用 `iframe` 来显示目标链接页面

iframe 最常见的用途之一就是嵌入外部链接。这可以用来展示来自其他网站的内容，比如视频、地图或者其他信息。使用 iframe 时，需要注意目标网站的安全策略，有些网站可能会阻止被嵌入。

示例 1：嵌入 Gaode Maps

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedding Gaode Maps</title>
    <style>
        html, body {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }
    </style>
</head>
<body>
    <h1 style="position: absolute; top: 0; left: 0; width: 100%; text-align: center; background-color: rgba(255, 255, 255, 0.8);">My Favorite Place</h1>
    <iframe
        src="https://www.amap.com/place/B0FFK8OQLY"
        allowfullscreen
        loading="lazy"></iframe>
</body>
</html>

这个示例中，嵌入了 Gaode Maps 的一部分，展示了小麦岛公园的地图。通过 style="border:0;" 去除了边框，allowfullscreen 属性使地图可以全屏显示。

示例 2：嵌入 Bilibili 视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedding Bilibili Video</title>
    <style>
        html, body {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }
        .iframe-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <h1>Watch this Video</h1>
    <div class="iframe-container">
        <iframe
            src="https://www.bilibili.com/video/BV1m441117Rb/?spm_id_from=333.337.search-card.all.click&vd_source=5dbd7e9d52229e38b46b7897ed6034f2"
            title="Bilibili video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
    </div>
</body>
</html>