HTML - 框架

HTML框架用于将浏览器窗口划分为多个部分,其中每个部分都可以加载单独的HTML文档.浏览器窗口中的帧集合称为框架集.窗口按表格组织的方式划分为框架:行和列.

框架的缺点

有一些缺点使用框架,所以永远不建议在你的网页中使用框架减去;

  • 一些较小的设备无法经常处理框架,因为他们的屏幕不够大,无法分割.

  • 由于屏幕分辨率不同,有时您的页面在不同的计算机上会以不同的方式显示.

  • 浏览器的后退按钮可能无法按照用户的意愿运行.

  • 仍然很少有浏览器不支持框架技术.

创建框架

使用我们使用的页面上的框架< frameset>标签而不是< body>标签. < frameset>标签定义,如何将窗口划分为帧. < frameset>的属性tag定义水平框架, cols 属性定义垂直框架.每个帧由< frame>表示.标签,它定义哪个HTML文档将打开到框架中.

注意 :  < frame> HTML5中不推荐使用标记.不要使用此元素.

示例

以下是创建三个水平框架的示例 :

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

Example

让我们将上面的示例如下所示,在这里我们将cols属性替换为cols并更改了它们的宽度。 这将垂直创建所有三个框架:

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

The <frameset> Tag Attributes

以下是<frameset>标签的重要属性:

Sr.NoAttribute & Description
1

cols

Specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of the four ways &minus;

Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100".

A percentage of the browser window. For example, to create three vertical frames, use cols = "10%, 80%, 10%".

Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *, 10%". In this case wildcard takes remainder of the window.

As relative widths of the browser window. For example, to create three vertical frames, use cols = "3*, 2*, 1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth.

2

rows

This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For example, to create two horizontal frames, use rows = "10%, 90%". You can specify the height of each row in the same way as explained above for columns.

3

border

This attribute specifies the width of the border of each frame in pixels. For example, border = "5". A value of zero means no border.

4

frameborder

This attribute specifies whether a three-dimensional border should be displayed between frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0" specifies no border.

5

framespacing

This attribute specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing = "10" means there should be 10 pixels spacing between each frames.

The <frame> Tag Attributes

以下是<frame>标签的重要属性:

Sr.NoAttribute & Description
1

src

This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src = "/html/top_frame.htm" will load an HTML file available in html directory.

2

name

This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.

3

frameborder

This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).

4

marginwidth

This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth = "10".

5

marginheight

This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight = "10".

6

noresize

By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize = "noresize".

7

scrolling

This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll bars.

8

longdesc

This attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = "framedescription.htm"

Browser Support for Frames

如果用户使用的是任何旧的浏览器或任何不支持框架的浏览器,则应向用户显示<noframes>元素。

因此,您必须将<body>元素放置在<noframes>元素内,因为<frameset>元素应该替换<body>元素,但是如果浏览器不理解<frameset>元素,则它应该了解内部的内容。 <noframes>元素中包含的<body>元素。

您可以向使用旧浏览器的用户发送一些好消息。 例如,对不起! 你的浏览器不支持框架。 如上例所示。

Frame's name and target attributes

框架最流行的用途之一是将导航栏放置在一个框架中,然后将主页加载到单独的框架中。

让我们看下面的示例,其中test.htm文件具有以下代码:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

在这里,我们创建了两列以填充两个框架。 第一帧为200像素宽,将包含由menu.htm文件实现的导航菜单栏。 第二列将填充剩余空间,并将包含页面的主要部分,并由main.htm文件实现。 对于菜单栏中的所有三个链接,我们都将目标框架称为main_page,因此,每当单击菜单栏中的任何链接时,可用链接都会在主页中打开。

以下是menu.htm文件的内容

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

以下是main.htm文件的内容:

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

当我们加载test.htm文件时,将产生以下结果:

现在你可以试试单击左侧面板中的可用链接并查看结果. targetattribute 还可以采用以下值之一 :

Sr.No选项&描述
1

_self  

将页面加载到当前帧中.

2

_blank  

将页面加载到新的浏览器窗口中.打开一个新窗口.

3

_parent  

将页面加载到父窗口,在这种情况下单个框架集的主浏览器窗口.

4

_top  

将页面加载到浏览器窗口,替换任何当前帧.

5

targetframe  

将页面加载到指定的目标框架中.