前端中的 iframe 详解
1. 什么是 iframe？
iframe（inline frame）是一种在 HTML 页面中嵌入另一个 HTML 页面的方法。通过 iframe，你可以在当前网页中显示另一个完全独立的网页，它们是彼此分离的。换句话说，iframe 允许你在当前页面中创建一个子窗口，而该窗口可以加载另一个网站或内容。
在这个例子中，iframe 会在页面中嵌入并显示 https://www.example.com 这个网页。
2. iframe 的用途
iframe 的常见用途包括：
嵌入视频：如 YouTube、Vimeo 等视频平台提供的嵌入代码；加载广告：广告常常通过 iframe 嵌入，以确保广告内容与主页面隔离；嵌入外部内容：将一个完全独立的页面嵌入到当前页面中，比如加载第三方应用、表单等；内嵌文档：将 PDF、HTML、网站等文件展示在网页中；跨域内容嵌入：通过 iframe 可以显示来自不同域名的内容，但需要考虑一些安全限制。
3. iframe 的常见属性
iframe 有很多常见属性，可以控制其行为、外观和与父页面的交互。
src：嵌入页面的 URL 地址。
例子：
width 和 height：设置 iframe 的宽度和高度，可以是像素值或者百分比。
例子：
frameborder：控制 iframe 边框的显示。0 表示无边框，1 表示有边框（已废弃，建议使用 CSS 控制）。
例子：
scrolling：控制 iframe 内是否显示滚动条。yes 表示允许，no 表示不允许，auto 根据内容自动判断。
例子：
sandbox：限制 iframe 内内容的权限，比如禁止脚本执行、表单提交等。常见值包括：
allow-scripts：允许脚本运行；allow-forms：允许表单提交；allow-same-origin：允许 iframe 内的内容被认为与父页面同源（这非常危险，需谨慎使用）。例子：
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。为安全起见，最好指定一个确切的来源。
iframe 接收消息并回应：
在 iframe 页面中，使用 window.addEventListener('message', callback) 来监听消息：
6. 示例：使用 iframe 嵌入 YouTube 视频
嵌入视频是 iframe 的常见用途之一。例如，你可以通过 iframe 在网页中嵌入一个 YouTube 视频：
在这个例子中，iframe 会显示一个宽为 560 像素，高为 315 像素的 YouTube 视频播放器。
7. 示例：加载另一个 HTML 文件
假设你有两个 HTML 文件，一个是主页面 index.html，另一个是被嵌入的页面 about.html，你可以通过 iframe 将 about.html 嵌入到 index.html 中。
index.html:
This is the Main Page
about.html:
This is the About Page
Welcome to the embedded about page!
当你加载 index.html 时，iframe 会在主页面中显示 about.html 的内容。
8. CSS 样式控制 iframe
你可以使用 CSS 来控制 iframe 的显示，比如调整大小、隐藏边框、设置响应式等。
使 iframe 响应式：可以通过百分比宽度和固定高度，确保 iframe 在不同屏幕上都能适应。
9. 总结
iframe 是一种强大的工具，允许你在网页中嵌入其他独立页面或内容。尽管它用途广泛，但也需要注意潜在的安全风险。通过合理使用如 sandbox、X-Frame-Options、postMessage 等机制，你可以确保 iframe 的安全性。
总结要点：
嵌入网页、视频、广告、文档等；常见属性：src、width、height、frameborder、`
sandbox、allowfullscreen`；
跨域通信：使用 postMessage；安全性：防范点击劫持、控制跨域资源。