前端中的 iframe 详解
1. 什么是 iframe？
（inline frame）是一种在 HTML 页面中嵌入另一个 HTML 页面的方法。通过 ，你可以在当前网页中显示另一个完全独立的网页，它们是彼此分离的。换句话说， 允许你在当前页面中创建一个子窗口，而该窗口可以加载另一个网站或内容。
在这个例子中， 会在页面中嵌入并显示 这个网页。
2. 的用途
的常见用途包括：
- 嵌入视频：如 YouTube、Vimeo 等视频平台提供的嵌入代码；
- 加载广告：广告常常通过 嵌入，以确保广告内容与主页面隔离；
- 嵌入外部内容：将一个完全独立的页面嵌入到当前页面中，比如加载第三方应用、表单等；
- 内嵌文档：将 PDF、HTML、网站等文件展示在网页中；
- 跨域内容嵌入：通过 可以显示来自不同域名的内容，但需要考虑一些安全限制。
3. 的常见属性
有很多常见属性，可以控制其行为、外观和与父页面的交互。
- ：嵌入页面的 URL 地址。
- 例子：
- 和 ：设置 的宽度和高度，可以是像素值或者百分比。
- 例子：
- ：控制 边框的显示。 表示无边框， 表示有边框（已废弃，建议使用 CSS 控制）。
- 例子：
- ：控制 内是否显示滚动条。 表示允许， 表示不允许， 根据内容自动判断。
- 例子：
- ：限制 内内容的权限，比如禁止脚本执行、表单提交等。常见值包括：
- ：允许脚本运行；
- ：允许表单提交；
- ：允许 内的内容被认为与父页面同源（这非常危险，需谨慎使用）。
- 例子：
- ：允许 内容进入全屏模式（比如视频）。
- 例子：
4. 安全性考虑
虽然很方便，但也存在一些安全风险，尤其是涉及跨域内容时，以下是一些常见的安全问题：
- 点击劫持（Clickjacking）：攻击者可以利用 将一个网页嵌入到透明的 中，诱导用户点击，从而劫持用户操作。这种情况下，用户以为在操作当前页面，实际上在点击 内的内容。
- 解决方法：在被嵌入的页面中设置 响应头，阻止页面被嵌入： 或者允许特定来源的嵌入：
- 跨域通信问题：不同域名下的页面不能直接通过 JavaScript 进行交互。这是为了防止跨站脚本攻击（XSS）。不过可以通过 实现安全的跨域通信（见下文）。
5. 中的跨域通信
由于安全性限制，两个不同源的页面不能直接访问彼此的 DOM。例如，如果主页面位于 ，而 加载的是 ，它们不能通过常规的 JavaScript 互相操控。但我们可以使用 方法，在不同源的 和父页面之间安全地传递消息。
使用 进行跨域通信
- 父页面向 iframe 发送消息：
在父页面中，可以使用 来向 发送消息：这里的 表示消息可以发送到任何来源的 。为安全起见，最好指定一个确切的来源。
- iframe 接收消息并回应：
在 页面中，使用 来监听消息：
6. 示例：使用 嵌入 YouTube 视频
嵌入视频是 的常见用途之一。例如，你可以通过 在网页中嵌入一个 YouTube 视频：
在这个例子中， 会显示一个宽为 560 像素，高为 315 像素的 YouTube 视频播放器。
7. 示例：加载另一个 HTML 文件
假设你有两个 HTML 文件，一个是主页面 ，另一个是被嵌入的页面 ，你可以通过 将 嵌入到 中。
:
:
当你加载 时， 会在主页面中显示 的内容。
8. CSS 样式控制
你可以使用 CSS 来控制 的显示，比如调整大小、隐藏边框、设置响应式等。
- 使 响应式：可以通过百分比宽度和固定高度，确保 在不同屏幕上都能适应。
9. 总结
是一种强大的工具，允许你在网页中嵌入其他独立页面或内容。尽管它用途广泛，但也需要注意潜在的安全风险。通过合理使用如 、、 等机制，你可以确保 的安全性。
总结要点：
- 嵌入网页、视频、广告、文档等；
- 常见属性：、、、、`
sandboxallowfullscreen`；
- 跨域通信：使用 ；
- 安全性：防范点击劫持、控制跨域资源。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/14157.html