iframe详解和用途解读
前端中的 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: DENYX-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； - 安全性：防范点击劫持、控制跨域资源。