在前端开发中，我们经常需要在自己的网页中嵌入其他网站的内容，比如显示地图、视频等。这时候，就可以使用 iframe 标签来实现。
iframe 是什么？
iframe 全称 inline frame（内联框架），是 HTML 中的一个标签，它可以在当前页面中嵌入另一个页面或文档。这个嵌入的页面或文档会作为一个独立的窗口显示在当前页面中。
如何使用 iframe？
使用 iframe 非常简单。只需要在 HTML 代码中插入以下代码即可：
<iframe src="https://www.example.com"></iframe>
其中，src 属性指定了嵌入的页面或文档的地址。当页面加载完毕后，iframe 就会将该地址指向的页面或文档嵌入到当前页面中。
设置 iframe 的宽高和样式
默认情况下，iframe 显示的大小为其嵌入的页面或文档的大小。但是我们也可以通过设置 iframe 的 width 和 height 属性来控制其大小。比如：
<iframe src="https://www.example.com" width="500" height="300"></iframe>
此外，我们还可以通过 CSS 来设置 iframe 的样式，比如边框、内边距等。例如：
<iframe src="https://www.example.com" style="border:1px solid black; padding:10px;"></iframe>
与父页面进行通信
在某些情况下，我们需要让嵌入的页面或文档与当前页面进行通信。这时候可以使用 window.parent 属性来获取到父页面的 window 对象，从而实现跨页面通信。例如：
-- -------------------- ---- -------
---- ----- ---
------- -------------- -----------------------
--------
--- ------ - ------------------------------------
--- ------------ - ---------------------
--------------------------------- ---------------------------
---------
---- ----- ---
--------
---------------------------------- --------------- -
-- ------------- --- -------------------------- -
------------------------ -- -- -----
--------------------------------- --------------
-
---
---------上面的代码中，父页面通过获取 iframe 的 contentWindow 属性来获取到子页面的 window 对象，并使用 postMessage 方法向子页面发送消息。子页面则通过监听 message 事件来接收消息，并使用 event.source 属性向父页面回复消息。
总结
通过本文的介绍，我们学习了如何使用 iframe 在网页中嵌入其他网站内容，并掌握了如何设置 iframe 的宽高和样式，以及与父页面进行通信。使用 iframe 可以让我们更加灵活地展示和处理页面内容，为前端开发带来了更多的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8167
