iframe的各项参数整理附说明及使用示例

发布时间：2026-09-28 18:30:35 浏览次数：1

iframe的各项参数整理附说明及使用示例

iframe是什么？

iframe 全称是 Inline Frame，中文翻译为内联框架，是 HTML 的一种内嵌框架技术。通过它可以在网页中嵌入其它网页或者文档，可以说是一个在页面中嵌套显示其他 HTML 页面的容器。HTML 中真正的页面是父页面，iframe 中嵌套的是子页面。在父页面中，可以通过 iframe 标签将子页面嵌入页面中显示。

使用方法

iframe 标签的用法如下：

<iframe src="child_page.html">  <p>如果您的浏览器支持 iframe 标签，该段文本将不被显示</p></iframe>

src 属性：指向子页面的 URL。
frameborder 属性：设置边框大小，0 表示没有边框。
scrolling 属性：设置上下/左右滚动条，可能的值有 yes、no、auto。
width 和 height 属性：定义 iframe 的尺寸。
name 属性：为iframe定义一个名称，以便于与其他 iframe 进行通信。

iframe的应用实例

1. 在同一页面内嵌套视频

下面是一个嵌套视频的示例代码：

<iframe src="https://www.***.com/embed/VIDEO_ID"         width="560"         height="315"         frameborder="0"         allowfullscreen></iframe>

其中，src 属性指定了要嵌套的视频链接，width 和 height 指定了视频的宽和高。

2. 提供交互式的“代码演示”功能

下面是一个记录用户输入的代码示例：

<iframe srcdoc="  <!DOCTYPE html>  <html>  <head>      <title>代码演示</title>  </head>  <body>      <textarea ></textarea>      <br>      <button onclick='runCode()'>运行</button>      <br>      <iframe  width='100%' height='100%'></iframe>      <script>          function runCode() {              var code = document.getElementById('code').value;              var iframe = document.getElementById('output').contentWindow.document;              iframe.open();              iframe.write(code);              iframe.close();          }      </script>  </body>  </html>  "  width="100%" height="300px"></iframe>

这个示例创建了一个具有交互性质的代码演示页面，用户在 textarea中输入代码后，点击“运行”按钮，代码将在 iframe 中执行，并在 iframe 中显示输出结果。

总结

iframe 可以在当前网页中嵌套显示其它网页或文档。除了常用的 src 属性之外，还有 frameborder、scrolling、width 和 height、name 等多种属性可以用来修改 iframe 的外观和行为。在 iframe 中还可以使用 JS 来进行数据交互，实现更加丰富的功能。

上一篇：php缓冲 output_buffering的使用详解下一篇：Vue中使用vux的配置详解

知识问答

iframe的各项参数整理附说明及使用示例