iframe详解和用途解读

OEC小胖胖

于 2024-09-11 21:57:53 发布

阅读量639

点赞数 16

分类专栏： HTML+CSS 文章标签： web 前端 HTML html5

本文链接：https://blog.csdn.net/2301_79858914/article/details/142151358

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端中的 iframe 详解

1. 什么是 iframe？

iframe（inline frame）是一种在 HTML 页面中嵌入另一个 HTML 页面的方法。通过 iframe，你可以在当前网页中显示另一个完全独立的网页，它们是彼此分离的。换句话说，iframe 允许你在当前页面中创建一个子窗口，而该窗口可以加载另一个网站或内容。

<iframe src="https://www.example.com"></iframe>

在这个例子中，iframe 会在页面中嵌入并显示 https://www.example.com 这个网页。

2. `iframe` 的用途

iframe 的常见用途包括：

嵌入视频：如 YouTube、Vimeo 等视频平台提供的嵌入代码；
加载广告：广告常常通过 iframe 嵌入，以确保广告内容与主页面隔离；
嵌入外部内容：将一个完全独立的页面嵌入到当前页面中，比如加载第三方应用、表单等；
内嵌文档：将 PDF、HTML、网站等文件展示在网页中；
跨域内容嵌入：通过 iframe 可以显示来自不同域名的内容，但需要考虑一些安全限制。

3. `iframe` 的常见属性

iframe 有很多常见属性，可以控制其行为、外观和与父页面的交互。

src：嵌入页面的 URL 地址。

例子：

<iframe src="https://www.example.com"></iframe>

width 和 height：设置 iframe 的宽度和高度，可以是像素值或者百分比。
- 例子：
```
<iframe src="https://www.example.com" width="600" height="400"></iframe>
```
frameborder：控制 iframe 边框的显示。0 表示无边框，1 表示有边框（已废弃，建议使用 CSS 控制）。
- 例子：
```
<iframe src="https://www.example.com" frameborder="0"></iframe>
```
scrolling：控制 iframe 内是否显示滚动条。yes 表示允许，no 表示不允许，auto 根据内容自动判断。
- 例子：
```
<iframe src="https://www.example.com" scrolling="no"></iframe>
```
sandbox：限制 iframe 内内容的权限，比如禁止脚本执行、表单提交等。常见值包括：
- allow-scripts：允许脚本运行；
- allow-forms：允许表单提交；
- allow-same-origin：允许 iframe 内的内容被认为与父页面同源（这非常危险，需谨慎使用）。
- 例子：
```
<iframe src="https://www.example.com" sandbox="allow-scripts"></iframe>
```

allowfullscreen：允许 iframe 内容进入全屏模式（比如视频）。

例子：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>

4. 安全性考虑

iframe 虽然很方便，但也存在一些安全风险，尤其是涉及跨域内容时，以下是一些常见的安全问题：

点击劫持（Clickjacking）：攻击者可以利用 iframe 将一个网页嵌入到透明的 iframe 中，诱导用户点击，从而劫持用户操作。这种情况下，用户以为在操作当前页面，实际上在点击 iframe 内的内容。
- 解决方法：在被嵌入的页面中设置 X-Frame-Options 响应头，阻止页面被嵌入：
```
X-Frame-Options: DENY
```
  或者允许特定来源的嵌入：
```
X-Frame-Options: SAMEORIGIN
```
跨域通信问题：不同域名下的页面不能直接通过 JavaScript 进行交互。这是为了防止跨站脚本攻击（XSS）。不过可以通过 postMessage 实现安全的跨域通信（见下文）。

5. `iframe` 中的跨域通信

由于安全性限制，两个不同源的页面不能直接访问彼此的 DOM。例如，如果主页面位于 https://example.com，而 iframe 加载的是 https://another-site.com，它们不能通过常规的 JavaScript 互相操控。但我们可以使用 window.postMessage() 方法，在不同源的 iframe 和父页面之间安全地传递消息。

使用 `postMessage` 进行跨域通信

父页面向 iframe 发送消息：
在父页面中，可以使用 iframe.contentWindow.postMessage 来向 iframe 发送消息：
```
<iframe id="myFrame" src="https://www.another-site.com"></iframe>

<script>
  const iframe = document.getElementById('myFrame');
  iframe.contentWindow.postMessage('Hello from parent', '*');
</script>
```
这里的 '*' 表示消息可以发送到任何来源的 iframe。为安全起见，最好指定一个确切的来源。

iframe 接收消息并回应：
在 iframe 页面中，使用 window.addEventListener('message', callback) 来监听消息：

<script>
  window.addEventListener('message', function(event) {
    console.log('Received message:', event.data);
    // 确认消息来源的安全性
    if (event.origin === 'https://www.example.com') {
      // 回复消息
      event.source.postMessage('Hello from iframe', event.origin);
    }
  });
</script>

6. 示例：使用 `iframe` 嵌入 YouTube 视频

嵌入视频是 iframe 的常见用途之一。例如，你可以通过 iframe 在网页中嵌入一个 YouTube 视频：

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

在这个例子中，iframe 会显示一个宽为 560 像素，高为 315 像素的 YouTube 视频播放器。

7. 示例：加载另一个 HTML 文件

假设你有两个 HTML 文件，一个是主页面 index.html，另一个是被嵌入的页面 about.html，你可以通过 iframe 将 about.html 嵌入到 index.html 中。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Page</title>
</head>
<body>
  <h1>This is the Main Page</h1>
  <iframe src="about.html" width="600" height="400"></iframe>
</body>
</html>

about.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Page</title>
</head>
<body>
  <h1>This is the About Page</h1>
  <p>Welcome to the embedded about page!</p>
</body>
</html>

当你加载 index.html 时，iframe 会在主页面中显示 about.html 的内容。

8. CSS 样式控制 `iframe`

你可以使用 CSS 来控制 iframe 的显示，比如调整大小、隐藏边框、设置响应式等。

<iframe src="https://www.example.com" style="border: none; width: 100%; height: 500px;"></iframe>

使 iframe 响应式：可以通过百分比宽度和固定高度，确保 iframe 在不同屏幕上都能适应。

9. 总结

iframe 是一种强大的工具，允许你在网页中嵌入其他独立页面或内容。尽管它用途广泛，但也需要注意潜在的安全风险。通过合理使用如 sandbox、X-Frame-Options、postMessage 等机制，你可以确保 iframe 的安全性。

总结要点：

嵌入网页、视频、广告、文档等；
常见属性：src、width、height、frameborder、`

sandbox、allowfullscreen`；

跨域通信：使用 postMessage；
安全性：防范点击劫持、控制跨域资源。

OEC小胖胖

关注

16
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
iframe详解和用途解读

iframe）是一种在 HTML 页面中嵌入另一个 HTML 页面的方法。通过iframe，你可以在当前网页中显示另一个完全独立的网页，它们是彼此分离的。换句话说，iframe允许你在当前页面中创建一个子窗口，而该窗口可以加载另一个网站或内容。
复制链接

扫一扫