HTML 框架

前言

  • iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

  • 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

标签 描述 备注 🔗
<iframe> </iframe> 定义一个框架 🔗
<frame /> HTML5 不再支持。定义框架集的窗口或框架 🔗
<frameset> </frameset> HTML5 不再支持。定义框架集 🔗
<noframes> </noframes> HTML5 不再支持。定义针对不支持框架的用户的替代内容 🔗

1、语法

  • 语法

    1
    <iframe src="url"> </iframe>
    • url 指向不同的网页。
  • 出于有些网页不希望被嵌套, 响应头中有一选项 X-Frame-Options,它有三个可配置值:

描述
DENY 表示该网站页面不允许被嵌套,即便是在自己的域名的页面中也不能进行嵌套
SAMEORIGIN 表示该页面可以在相同域名页面中被嵌套展示
ALLOW-FROM uri 表示该页面可以在指定来源页面中进行嵌套展示

2、实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>

    <body>
    <iframe src="https://www.qianchia.com" width="900" height="300"></iframe>
    </body>

    </html>
  • 效果

3、属性

属性 描述 备注 🔗
align left
right
top
middle
bottom
HTML5 不支持HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe> 🔗
frameborder 1
0
HTML5 不支持。规定是否显示 <iframe> 周围的边框 🔗
height pixels 规定 <iframe> 的高度 🔗
longdesc URL HTML5 不支持。规定一个页面,该页面包含了有关 <iframe> 的较长描述 🔗
marginheight pixels HTML5 不支持。规定 <iframe> 的顶部和底部的边距 🔗
marginwidth pixels HTML5 不支持。规定 <iframe> 的左侧和右侧的边距 🔗
name name 规定 <iframe> 的名称 🔗
sandbox “”
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation
<iframe> 的内容定义一系列额外的限制 H5 新加 🔗
scrolling yes
no
auto
HTML5 不支持。规定是否在 <iframe> 中显示滚动条 🔗
seamless seamless 规定 <iframe> 看起来像是父文档中的一部分 H5 新加 🔗
src URL 规定在 <iframe> 中显示的文档的 URL 🔗
srcdoc HTML_code 规定页面中的 HTML 内容显示在 <iframe> H5 新加 🔗
width pixels 规定 <iframe> 的宽度 🔗

4、高度与宽度

  • 属性默认以像素为单位。

  • 可以指定其按比例显示,如:”80%”。

属性 描述 备注 🔗
height pixels 规定 <iframe> 的高度 🔗
width pixels 规定 <iframe> 的宽度 🔗
  • 实例

    1
    <iframe src="https://www.qianchia.com" width="900" height="300"></iframe>
  • 效果

    • 如上

5、边框

  • frameborder 属性用于定义 iframe 表示是否显示边框。

  • 设置属性值为 “0” 时,不显示 iframe 的边框。

属性 描述 备注 🔗
frameborder 1
0
HTML5 不支持。规定是否显示 <iframe> 周围的边框 🔗
  • 实例

    1
    <iframe src="https://www.qianchia.com" width="900" height="300" frameborder="0"></iframe>
  • 效果,有边框

  • 效果,无边框

6、显示目标链接页面

  • iframe 可以显示一个目标链接的页面,目标链接的属性必须使用 iframe 的属性。

  • 实例

    1
    2
    <iframe src="https://blog.qianchia.com" name="iframe_a" width="900" height="300"></iframe>
    <p><a href="https://www.qianchia.com" target="iframe_a">Back Home</a></p>
  • 效果

    Back Home

  • 注意:因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接 Back Home 时页面会显示在 iframe 框架中。

7、HTML 实例

文章目录
  1. 1. 前言
  2. 2. 1、语法
  3. 3. 2、实例
  4. 4. 3、属性
  5. 5. 4、高度与宽度
  6. 6. 5、边框
  7. 7. 6、显示目标链接页面
  8. 8. 7、HTML 实例
隐藏目录