《前端开发从零学起》Lesson.10 HTML中的框架

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

HTML中的框架允许我们在一个浏览器窗口中显示多个不同的HTML文档页面。

框架可以让某个HTML文档显示在另一个HTML文档中,并且这个HTML文档可以加载多个HTML文档。一般框架多数使用在网站后台中,用于在一个页面中显示多个功能块,并且在点击面板菜单时,不影响菜单页面的显示。

 

框架的使用方法

框架主要有两种类型,分别为iframe和frameset两种。

两种的主要区别在于:iframe 也成为内联框架,是在html页面内嵌入连接另一个页面,一般多使用iframe框架,frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里,应用较少。

 

iframe的使用方法为:<iframe src="xxx.html"></iframe>

通过设定src的值来为iframe指定其加载的页面。

iframe的可用的属性为:
































































align

  • left

  • right

  • top

  • middle

  • bottom


不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。TF
frameborder

  • 1

  • 0


规定是否显示框架周围的边框。TF
height

  • pixels

  • %


规定 iframe 的高度。TF
longdescURL规定一个页面,该页面包含了有关 iframe 的较长描述。TF
marginheightpixels定义 iframe 的顶部和底部的边距。TF
marginwidthpixels定义 iframe 的左侧和右侧的边距。TF
nameframe_name规定 iframe 的名称。TF
scrolling

  • yes

  • no

  • auto


规定是否在 iframe 中显示滚动条。TF
srcURL规定在 iframe 中显示的文档的 URL。TF
width

  • pixels

  • %


定义 iframe 的宽度。TF

 

frameset 的使用方法为:

<frameset>

<frame src="a.html"></frame>

<frame src="b.html"></frame>

</frameset>

framset以开始标签与结束标签定义框架的显示区域。通过在区域内设置farme标签的src来定义每个子框架显示的页面。需要注意的是,frameset标签只能用于框架性页面布局,不能使用在body标签内。

frameset可以使用的属性为:
















cols

  • pixels

  • %

  • *


定义框架集中列的数目和尺寸。有关 cols 属性的详细信息。例如:cols="25%,50%,25%"F
rows

  • pixels

  • %

  • *


定义框架集中行的数目和尺寸。有关 rows 属性的详细信息。例如:rows="25%,50%,25%"F

 

框架的使用案例演示

下面的实例中,通过框架加载百度的首页。并且在点击框架中的页面时不会刷新整个页面,而是在框架中刷新内容。(由于在前端开发中frameset不能插入在body标签中,因此本文只演示ifarme框架)

 

使用框架的注意事项


  • 使用框架时,需要维护多个HTML目标文档

  • 如果框架中的HTML文档有可见边框,用户可以拖动边框来改变框架的大小。但是如果不希望用户改变框大小,可以在frame标签中加入noresize="noresize"

  • 需要为不支持框架的浏览器添加 <noframes> 标签。

  • 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用

  • 假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内

  • 无法被搜索引擎良好的读取与爬行,对搜索引擎不友好


 

结语:框架多数情况下用于网站后台的管理页面开发,其页面的独立性可以在用户点击菜单时只改变部分页面的内容而不影响菜单的点击状态。不过在某些情况下,也可以用于前台页面的。例如:加载广告、处理某些幻灯片造成的JS冲突(将页面js与内容拆分为两个页面,解决冲突问题)调用其他站点的某些功能等。