iframe 属性详解：自定义嵌入式体验 (iframe父子页面传参数)

iframe 元素使您能够将另一个文档嵌入当前文档中，为用户提供嵌入式体验。它提供了广泛的属性，允许您自定义嵌入式内容的外观和行为。

常见 iframe 属性

src 属性

src 属性指定要嵌入的文档的 URL。它是 iframe 元素的必需属性。

width 和 height 属性

width 和 height 属性分别设置 iframe 的宽度和高度。单位可以是像素 (px) 或百分比 (%)。

frameborder 属性

frameborder 属性指定 iframe 是否显示边框。将其设置为 0 可隐藏边框，将其设置为 1 可显示边框。

scrolling 属性

scrolling 属性指定 iframe 是否具有滚动条。可以将其设置为 "auto"（必要时显示滚动条）、"no"（禁用滚动条）或 "yes"（始终显示滚动条）。

父子页面通信

postMessage() 方法

iframe 元素提供了 postMessage() 方法，允许父子页面之间进行通信。父页面可以使用以下方式发送消息：

    let iframe = document.querySelector('iframe');iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');

子页面可以使用以下方式接收消息：

    window.addEventListener('message', function(event) {if (event.origin === 'https://example.com') {console.log(event.data); // 输出: "Hello from parent"}});

onmessage 事件

父页面可以使用 onmessage 事件侦听来自子页面的消息：

    let iframe = document.querySelector('iframe');iframe.addEventListener('message', function(event) {console.log(event.data); // 输出: 消息内容});

其他属性

属性	描述
name	iframe 的名称
title	iframe 的标题
allowfullscreen	允许嵌入式内容进入全屏模式
sandbox	设置 iframe 中嵌入式内容的沙盒策略

用例

嵌入视频

您可以使用 iframe 将 YouTube 视频嵌入到您的网页中：

嵌入地图

您可以使用 iframe 将 google 地图嵌入到您的网页中：

嵌入社交媒体小组件

您可以使用 iframe 将社交媒体小组件嵌入到您的网页中，例如推特时间线或 Facebook 评论框：

结论

iframe 元素提供了广泛的属性，允许您完全自定义嵌入式体验。通过了解这些属性，您可以创建引人入胜且交互式的内容，为您的用户提供丰富且有价值的体验。

---

---

相关标签： iframe、 iframe父子页面传参数、 属性详解、 自定义嵌入式体验、

上一篇：iframe属性入门建立交互式Web页面iframe父

下一篇：终极指南掌握iframe属性以增强Web应用程序