iframe 属性入门：建立交互式 Web 页面 (iframe父子页面传参数)

iframe 元素是一个 HTML 元素，允许您在当前网页中嵌入另一个网页或文档。它提供了一种在不离开原始页面或上下文的条件下，在网页中包含交互式内容或外部内容的强大方式。

iframe 属性

iframe 元素有许多属性，可用于自定义其行为和外观。以下是一些最常用的属性：

• src ：指定要嵌入的网页或文档的 URL。
• width ：设置嵌入式网页或文档的宽度，单位为像素。
• height ：设置嵌入式网页或文档的高度，单位为像素。
• name ：为 iframe 元素分配一个名称，以便使用 javaScript 或其他脚本对其进行引用。
• Scrolling ：控制是否在嵌入式网页或文档周围显示滚动条。可能的选项有 "auto"（自动滚动）、"yes"（始终滚动）和 "no"（从不滚动）。
• frameborder ：指定是否显示 iframe 元素周围的边框。可能的选项有 "0"（无边框）、"1"（实线边框）和 "2"（3D 边框）。

父子页面通信

iframe 元素最强大的功能之一是允许父子页面之间的通信。通过使用 JavaScript，可以从父页面访问 iframe 的内容，反之亦然。

要从父页面访问 iframe 的内容，可以使用以下代码：

var iframeDocument = document.getElementById("iframe-id").contentDocument;iframeDocument.getElementById("element-id").innerHTML = "新的内容";

要从 iframe 访问父页面的内容，可以使用以下代码：

var parentDocument = window.parent.document;parentDocument.getElementById("element-id").innerHTML = "新的内容";

iframe 传递参数

使用 iframe 时，还可以从父页面向 iframe 传递参数。这可以通过使用 URL 哈希（）或查询字符串（?）来实现。

要使用 URL 哈希传递参数，请使用以下代码：

要使用查询字符串传递参数，请使用以下代码：

可以在 iframe 中使用 JavaScript 访问这些参数：

var parameter = window.location.hash.substring(1).split("=")[1];

使用 iframe 的示例

iframe 元素有许多使用场景，包括：

• 嵌入外部视频或音频播放器
• 创建可与外部 API 交互的自定义小部件
• 加载需要不同安全域或协议的第三方内容
• 创建可随时轻松替换或更新的模块化页面

结论

iframe 元素是构建交互式和动态网页的强大工具。通过了解其属性和使用方式，您可以创建复杂的 web 应用程序和体验。

---

---

相关标签： Web、 建立交互式、 属性入门、 iframe、 iframe父子页面传参数、 页面、

上一篇：iframe属性最佳实践优化嵌入式内容iframe嵌

下一篇：iframe属性详解自定义嵌入式体验iframe父子