HTML

HTML 知识量:9 - 26 - 70

9.1 iframe标签><

iframe标签简介- 9.1.1 -

<iframe> 标签在 HTML 中用于嵌入另一个文档到当前 HTML 文档中。它可以用来展示其他网页、视频、图像等。<iframe> 标签有很多属性,下面是一些主要的属性及其描述:

1. src:

  • 描述:指定要嵌入的文档的 URL。这可以是网页的 URL、图片的地址,或其他类型的文档。

  • 取值:可以是相对路径或绝对路径。

2. width 和 height:

  • 描述:用于指定 <iframe> 的宽度和高度。

  • 取值:可以使用像素值(例如 width="500")、百分比(例如 width="50%")或其他长度单位(例如 width="20em")。

3. frameborder:

  • 描述:指定是否显示 <iframe> 周围的边框。

  • 取值:可以是 "0"(表示不显示边框)或 "1"(表示显示边框)。

4. scrolling:

  • 描述:指定是否显示滚动条。

  • 取值:可以是 "yes"(表示显示滚动条)、"no"(表示不显示滚动条)或 "auto"(表示由浏览器决定)。

5. sandbox:

  • 描述:指定 <iframe> 的安全策略。它可以用来限制 <iframe> 中的内容可以做什么。

  • 取值:可以设置为 "allow-forms"(允许表单提交)、"allow-scripts"(允许脚本执行)、"allow-same-origin"(允许与父文档同源)、"allow-top-navigation"(允许在 <iframe> 中导航到顶级浏览上下文)等。

6. name:

  • 描述:指定 <iframe> 的名称,以便在其他元素中通过名称引用该 <iframe>。

  • 取值:一个唯一的名称。

7. allowfullscreen:

  • 描述:指定是否允许在 <iframe> 中全屏播放视频。

  • 取值:可以是 "true"(表示允许)或 "false"(表示不允许)。

8. loading:

  • 描述:指定 <iframe> 的加载行为。

  • 取值:可以是 "eager"(表示立即加载)、"lazy"(表示延迟加载)或 "auto"(表示由浏览器自动决定加载方式)。

9. referrerpolicy:

  • 描述:指定 <iframe> 的引用策略。这可以控制当从 <iframe> 导航到其他页面时,是否发送引用信息。

  • 取值:可以是 "no-referrer"(表示不发送引用信息)、"no-referrer-when-downgrade"(表示仅在安全的上下文中不发送引用信息)、"origin"(表示仅发送引用的源信息)、"unsafe-url"(表示发送完整的引用信息)。

10. align:

  • 描述:设置或获取 <iframe> 元素的对齐方式。

  • 取值:可以是 "left"、"right"、"top"、"middle"、"bottom" 等。

基本语法示例:

<iframe src="https://example.com" width="500" height="300" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>

这个示例展示了如何嵌入一个来自 https://example.com 的网页,并设置 <iframe> 的宽度、高度、不显示边框、不显示滚动条,并允许全屏播放视频。

注意:在使用 <iframe> 标签时,嵌入的内容可能会受到跨站脚本攻击(XSS)等安全威胁。