iFrame标签在HTML中的详细使用方法

来源：喔唷网编辑：喔唷教程时间：2025-04-01 浏览：

本篇教程详细的讲解了iFrame标签的用法以及基本语法，并且说明了iFrame的主要属性,并且给与了实际例子来展示iFrame标签的用法和安全性问题。

HTML `<iframe>` 标签

<iframe> 标签的用法

<iframe src="https://www.viuoo.com/" width="500" height="600"></iframe>

以上代码定义了一个<iframe>并且设置了它的 width（宽度）和height（高度）。src="URL"这里的URL表示我们需要引入嵌套的url地址，也可以是本地文件的地址,这里我们引入嵌套了一个喔唷网地址，那么嵌套进去的就是整个喔唷网的页面,下面是运行代码的示例。

我们来看看<iframe>标签的属性：

<iframe>属性	用法及描述
url	嵌套框架的地址,在<iframe>框架里显示页面的URL地址
width	用来设置 iframe 的宽度（像素或百分比）,例如 widht=“100px”,widht=“50%”
height	用来设置 iframe 的高度（像素或百分比）,例如 height=“100px”
name	用来设置 iframe 的名称。可用于链接的 target 属性,当页面无法显示的时候就显示这个名称。
frameborder	用来指定是否显示边框（0 或 1，HTML5 中已废弃，建议使用 CSS）
scrolling	用来指定是否显示滚动条（auto, yes, no）auto为根据内容自动调整，yes为显示，no为不显示
sandbox	用来对 iframe 内容施加额外限制（HTML5 新增），限制 iframe 的功能，增强安全性。X-Frame-Options：服务器可以通过设置此 HTTP 头来防止自己的页面被嵌入到 iframe 中，内容安全策略 (CSP)：可以通过 CSP 限制 iframe 的使用
allowfullscreen	用来设置允许 iframe 内容进入全屏模式

以下为iframe现代的常规用法：

<iframe 
  src="https://www.viuoo.com" 
  style="border:none; width:100%; height:500px;"
  title="示例 iframe"
  name="喔唷网"
  allowfullscreen>
</iframe>

sandbox增项安全性考虑：

<iframe src="..." sandbox="allow-same-origin allow-scripts"></iframe>

以上就是iframe的详细操作内容，但是还需注意的是：

应在在实际应用中尽量减少<iframe>标签的使用，因为它不仅会影响页面的性能，还会导致搜索引擎的搜录问题。跨域的iframe标签会收到同源侧略的限制。在移动设备中的<iframe>标签需要进行必要的处理才能正常使用。那么<iframe>常常用于嵌入地图、视频、社交媒体插件以及其他的第三方插件或者内容在网页中。

iFrame标签在HTML中的详细使用方法

HTML <iframe> 标签

<iframe> 标签的用法

HTML `<iframe>` 标签