Relationship and difference between frame, IFRAME, and frameset

Source: Internet
Author: User

■ Framework concept The so-called frame is to divide a webpage into several frames and obtain multiple URLs at the same time. You only need to <frameset> <frame>, and all frame markers need to be placed in a total HTML file. This file only records how the framework is divided and does not display any information, therefore, you do not need to add the <body> flag. to browse this framework, you must read this file instead of the files in other frame windows. <Frameset> is used to divide a frame window. Each frame window is marked by a <frame> MARK. <frame> must be used in the <frameset> range. For example: <Frameset Cols = "50%, *"> <frame name = "hello" src = "up2u.html"> <frame name = "hi" src = "me2.html"> </frameset> In this example, <frameset> splits the image into the left and right sides, displays up2u.html on the left, and displays the me2.html file on the right, <frame> the marked window is always in the order of top, bottom, left to right.
This section is mostly the same as the composer classroom's [Application Framework], but this section adds content and details. As in other chapters, we will not mention the webpage creation tool, if you have learned HTML, I believe you will not use composer or Frontpage tools.
■ <Frameset> <frame> :
<Frameset> frame tag, used to declare an HTML file as the frame mode and set how to split the windows. <Frame> only sets the parameter attributes in a window. <Frameset> parameter settings: Example: <Frameset rows = "90, *" frameborder = "0" border = 0 framespacing = "2" bordercolor = "#008000">
Cols = "90, *" vertical cut screen (for example, divided into two pictures), accept the integer, percentage, * represents the occupied space. The number of values indicates the number of windows to be divided by commas. For example, cols = "30, *, 50%" can be divided into three windows. The first window is the width of 30 pixels, which is an absolute split, the second window is the space left after the first and third windows are allocated. The third window occupies 50% of the width of the entire screen and is separated. You can adjust the number by yourself. Rows = "120, *" refers to horizontal cutting. The picture is separated up and down, and the value is set as the same as above. The Cols parameter and the rows parameter should not be in the same <frameset> flag, because netacape occasionally cannot display this type of frame, so use multiple splits. Frameborder = "0" sets the frame border. The value is only 0 and 1. 0 indicates no border, and 1 indicates that the border is to be displayed. (Avoid using yes or no) Border = "0" sets the Border thickness of the frame, in pixels. Bordercolor = "#008000" sets the border color of the frame. For color values, see [color theory ]. Framespacing = "5" indicates the gap between the framework and the framework. <Frame> parameter settings: Example:<Frame name = "TOP" src = "a.html" marginwidth = "5" marginheight = "5" scrolling = "Auto" frameborder = "0" noresize framespacing = "6" bordercolor = "# 0000ff">
Src = "a.html" sets the name of the webpage file to be displayed in this box. Each box must correspond to a webpage file. You can use absolute or relative paths. For more information about the two, see [LINK advanced ]. Name = "TOP" specifies the name of the box window to specify the framework for linking. This parameter must be named arbitrarily. Frameborder = 0: Set the frame border. The value is only 0 and 1. 0 indicates no border, and 1 indicates that the border is to be displayed. (Avoid using yes or no) framespacing = "6" indicates the gap between the framework and the framework. Bordercolor = "#008000" sets the border color of the frame. For color values, see [HTML Analysis ]. Scrolling = "Auto" sets whether to display the scroll. "Yes" indicates that the scroll is to be displayed. "No" indicates that no scroll is displayed in any case. "Auto" indicates that the scroll is displayed based on actual conditions. The noresize setting does not allow the user to change the size of the frame or set this parameter. The user can pull the frame and change its size with Will. Marginhight = 5 indicates the space reserved by some edges of the frame height. Marginwidth = 5 indicates the space reserved by the edge of the frame width. The following are examples: (same as the composer classroom's [Application Framework)
Example HTML code <Frameset rows = "80, *"> <frame name = "TOP" src = "a.html"> <frame name = "bottom" src = "B .html"> </frameset> Example HTML code<Frameset rows = "80 ,*, 80 "> <frame name =" TOP "src =" a.html "> <frame name =" Middle "src =" B .html "> <frame name =" bottom "src =" c.html "> </frameset>
Example HTML code <Frameset Cols = "150, *"> <frameset rows = "80, * "> <frame name =" upper_left "src =" a.html "> <frame name =" lower_left "src =" B .html "> </frameset> <frame name =" right" src = "c.html"> </frameset>
Example HTML code <Frameset rows = "80, *"> <frame name = "TOP" src = "a.html"> <frameset Cols = "150, * "> <frame name =" lower_left "src =" B .html "> <frame name =" lower_right "src =" c.html "> </frameset>

Example HTML code<Frameset Cols = "150, *"> <frame name = "Left" src = "a.html"> <frameset rows = "80, * "> <frame name =" upper_right "src =" B .html "> <frame name =" lower_right "src =" c.html "> </frameset>
■ <Noframes> : When the browser used by others is too old and does not support the framework function, what he sees will be blank. To avoid this problem, you can use the <noframes> flag. When the user's browser does not see the framework, the user will see the content between <noframes> and </noframes>, instead of blank. This content can be used to remind you to switch to a new browser, or even a webpage without a framework or automatically switch to a version without a framework. Application Method: add the </noframes> tag to the <frameset> tag range. The following is an example:
<Frameset rows = "80, *"> <noframes> <body> sorry, your browser does not support the framework function. Please switch to a new browser. </Body> </noframes> <frame name = "TOP" src = "a.html"> <frame name = "bottom" src = "B .html"> </frameset> If the browser supports the framework, it will not care about the content in <noframes>. However, if the browser does not support the framework, it will skip because it does not know all the framework tags, the enclosed items are interpreted, so the text in the <noframes> range is displayed.
■ <IFRAME> :
This flag applies only to IE (comet: Also used in Firefox ). It is used to insert a window in the middle of a page to display another file. It is a blocking mark, but the surrounding words are displayed only when the browser does not support IFRAME marking, such as <noframes>. IFRAME usually works well with a javascript that identifies the browser. If JavaScript recognizes that the browser is not Internet Explorer, it switches to another version. PS: Be sure to use </iframe> to disable it. Otherwise, the subsequent content cannot be displayed.

The parameter settings of <IFRAME> are as follows: Example:<IFRAME src = "iframe.html" name = "test" align = "center" width = "300" Height = "100" marginwidth = "1" marginheight = "1" frameborder =" 1 "scrolling =" yes "> </Iframe>
Src = "iframe.html" the file source to be displayed in this box must be a relative or absolute path except the file name. Name = "test" indicates the window name. This is required by the target parameter of the link tag. The optional values of align = "center" are left, right, top, middle, bottom, width = "300" Height = "100" frame width and length, in pixels. Marginwidth = "1" marginheight = "1" the space reserved by the inserted file and the border. Frameborder = "1" uses 1 to display borders, and 0 to not display borders. (Yes or no) scrolling = "yes" Use yes to allow rolling (inner), and no to allow Rolling

 

Differences between frame and IFRAME

1. Frame cannot be used independently from frameset, and IFRAME can;

2. The frame cannot be placed in the body; the following can be displayed normally:

<! -- <Body> --> < Frameset Rows = "50% ,*" > < Frame Name = "Frame1" SRC = "Test1.htm" /> < Frame Name = "Frame2" SRC = "Test2.htm" /> </ Frameset > <! -- <Body> -->

The following cannot be displayed normally:

<Body> <FramesetRows= "50% ,*"> <FrameName= "Frame1"SRC= "Test1.htm"/> <FrameName= "Frame2"SRC= "Test2.htm"/> </Frameset> <Body>

3. IFRAME nested in frameset must be placed in the body. The following can be displayed normally:

<Body> <Frameset> <IFRAMEName= "Frame1"SRC= "Test1.htm"/> <IFRAMEName= "Frame2"SRC= "Test2.htm"/> </Frameset> </Body>

The following cannot be displayed normally:

<! --<Body>--> <Frameset> <IFRAMEName= "Frame1"SRC= "Test1.htm"/> <IFRAMEName= "Frame2"SRC= "Test2.htm"/> </Frameset> <! --</Body>-->

4. IFRAME not nested in frameset can be used at will; the following can be displayed normally:

<Body> <IFRAMEName= "Frame1"SRC= "Test1.htm"/> <IFRAMEName= "Frame2"SRC= "Test2.htm"/> </Body> <! --<Body>--> <IFRAMEName= "Frame1"SRC= "Test1.htm"/> <IFRAMEName= "Frame2"SRC= "Test2.htm"/> <! --</Body>-->

5. The frame height can only be controlled by frameset; IFRAME can be controlled by itself, but cannot be controlled by frameset, for example:

<! --<Body>--> <FramesetRows= "50% ,*"> <FrameName= "Frame1"SRC= "Test1.htm"/> <FrameName= "Frame2"SRC= "Test2.htm"/> </Frameset> <! --</Body>--> <Body> <Frameset> <IFRAMEHeight= "30%"Name= "Frame1"SRC= "Test1.htm"/> <IFRAMEHeight= "100"Name= "Frame2"SRC= "Test2.htm"/> </Frameset> </Body>

6. If more than two IFRAME files are used on the same page, they can be normally displayed in IE, and only the first one can be displayed in Firefox; use more than two frames in IE and Firefox.

AboveCodeTest in IE7 and firefox2.0.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.