Create basic frameset
Frameset pages are somewhat different from common web pages. Although it still starts with the <HTML> and the
By using the <frameset> marked <rows> and <Cols> attributes, browser windows are divided into grids. The set values of <rows> and <Cols> can be fixed pixel values or percentage values of the total space, it can also be the proportional value of the remaining space that is separated by * and a number. For example:
Cols = "20%, *" is divided into three columns, the width is 80 pixels, the window width is, and the remaining width
Rows = "25%, 75%" is divided into two columns, the width of the window is 25% and 75% respectively
Rows = "*, 3 *" is the same as the preceding 2nd representation and is divided into two columns, but the representation method is different: the width of the first column is 1/3 of the second column
Between <frameset> and </frameset>, multiple <frame> labels are used to represent each partition. Col indicates the column from left to right, and row indicates the row from top to bottom. Each <frame> has a src attribute that provides the content of this frame. It can be any legal URL that the browser can display, or another frameset. To prevent recursion, a frame cannot contain its own frameset page. Use the name attribute to define the name of the frame so that it can be referenced in code or script programs. See the basic frameset code:
<HTML>
<Head>
<Title> simple frameset </title>
</Head>
<Frameset Cols = "40%, 60%" rows = "2 *, *">
<Frame name = "topleft" src = "red.htm">
<Frame name = "topright" src = "green.htm">
<Frame name = "botleft" src = "blue.htm">
<Frame name = "botright" src = "white.htm">
</Frameset>
</Html>
<Frameset rows = "105, *">
<Frame name = "adbanner" src = "ad.html">
<Frameset Cols = "40%, 60%">
<Frame name = "Left" src = "red.htm">
<Frameset rows = "*, *">
<Frame name = "TOP" src = "blue.htm">
<Frame name = "bottom" src = "white.htm">
</Frameset>
</Frameset>
</Frameset>
Links between frames
For a frameset page, the new document is only reprinted into a part of the window, while other pages remain static. When you click the link in the frame, the new content is opened in the same frame. To enable the new content in other frames, you can set the target attribute value marked by <A> to the name value of the frame.
In addition, we can also set to open any frame visible to the current target, not limited to its own frameset. The target may be a frame in a nested frameset, or a frame in another window. However, if the target frame does not exist, a new window with the name of the target frame will be generated.
The following example shows how to create a simple framesetfile named home.html. The Code is as follows:
<HTML>
<Head> <title> frommco home page </title> <Frameset Cols = "115, *">
<Frame src = "menu.htm">
<Frame name = "content" src = "main.htm">
</Frameset>
</Html>
The file menu.htm is in the frame on the left, with a series of links. After you click them, the new content will be opened in the frame named content on the right. The following is the menu.html code:
<HTML> <Body> <p> <br>
<p>
<A href = "main.htm" target = "content"> main page </a> <p>
<A href = "mission.htm" target = "content"> our mission </a> <p>
<A href = "staff.htm" target = "content"> our staff </a> <p>
<A href = "splash.htm" target = "_ parent"> frommco splash page </a>
</Body>
Note that the target in the last link is defined as _ parent, which belongs to four special reserved values. They are:
_ Parent: displays the new href at the current frameset position.
_ Top: New href is displayed in the current position of the window. For example, the frameset is located in another frameset.
_ Self: force the new href to be displayed in the current frame.
_ Blank: href is displayed in the new window.
The <area> flag of the client graphic map can also apply the target attribute, for example:
<Area shape = circle coords = "75, 75, 50" href = "main.htm" target = "content" alt = "main page">
Another common situation is that most or all links on a web page must be opened in a special frame. In this case, you can use the <base> flag in the
Modify Frame
Frameset not only has controllable values in width and height, but also can be precisely set in appearance.
By default, there is a raised edge between frames in frameset, indicating the split effect. If you do not like this and want to create a "seamless connection" effect, you can set frameborder = 0 in the <frame> mark to eliminate it. In navigator and Internet Explorer of version 3.0 and later, if frameborder = 0 is set in the <frameset> flag, except for Frame with frameborder = 1, the edges of all other frames will disappear.
Although frameborder = 0 is set, Some browsers still retain some edge Color Marks between frames. In this case, you can add framespacing = 0 (for Internet Explorer) or border = 0 (for navigator and opera) in the <frameset> flag to achieve real seamless connection.
See how the following code uses these attributes:
<HTML>
<Head> <title> frommco home page </title> <Frameset Cols = "115, *" framespacing = 0 border = 0>
<Frame src = "menu.htm" frameborder = 0 noresize scrolling = NO>
<Frame name = "content" src = "main.htm" frameborder = 0>
</Frameset>
</Html>
The above code has two new attributes: noresize indicates that the frame is locked and the mouse is not allowed to change the size. Scrolling = No indicates that the frame's scroll bar is blocked, and scrolling = Yes indicates that the frame is allowed, scrolling = auto indicates that the scroll bar is automatically displayed based on the display content.
Floating Frame
Floating frame is a definition in the html4.0 specification and is currently supported by browsers.
Unlike the split area represented by frameset, a floating frame exists on the web page as a built-in object, and its style is like a graph or applet on a page. Floating frame uses the <IFRAME> flag. It has most of the same attribute settings as <frame>, including: name, SRC, marginwidth, marginheight, frameborder, and scrolling. It also has the same height, width, and align attributes as the graph or applet.
In addition, a floating frame follows the same target principle as a normal frame: we can point to it through its name. This principle applies to floating frames in any frame type, and vice versa. In a floating frame, no traget link points to itself, while the _ parent link points to the frame or window where the document containing <IFRAME> is located. For example:
<IFRAME name = "floater" src = "start.htm" width = 150 Height = 200 hspace = 10 align = left>
Width = 150 Height = 200 hspace = 10 align = right>
</Iframe> <br>
<A href = "one.htm" target = "floater"> show one.htm </a> <p>
<A href = "two.htm" target = "floater"> show two.htm </a> <p>
<A href = "start.htm" target = "floater"> bring back start.htm </a>
Note: For browsers that support <IFRAME> tags, any content between <IFRAME> and </iframe> is ignored. Otherwise, the content is displayed, which can be used to explain that the current browser does not support <IFRAME>.
When to use frame
We know that the basic purpose of frameset is to split the browser window so that part of the content of the window changes, while other parts remain unchanged. With this feature, you can implement the toolbar navigation function. A static menu page is placed in a frame. After you click a project, relevant content is displayed in another frame. In this way, the file size can be reduced as the menu item does not need to be included in each content page.
There are two obvious limitations in frame:
Frame adds site management at another level, because the hyperlink not only points to an appropriate page, but also loads it into the relevant frame.
In addition, most browsers can only record the initial position of the frameset when performing the "add bookmarks" operation. No matter how deep the bookmarks are in the frameset, When you select the bookmarks again, the initial Page of the frameset will be returned. This increases the difficulty for visitors to browse specified content.
However, if the site information is well organized so that the navigation operation is only a few layers deep, the use of frame can serve visitors well. Remember: visitors all want concise navigation information.
Of course, navigation is not the only reason for using frame. You can also use frame to create swap tools and swap pages. Moreover, the multi-document Framework Structure of frame is very suitable for JavaScript applications.
Design site with Frame
The most common frame structure is "menu-content" frameset. Place navigation menus in one frame, and reprint sub-menus in another frame. The links of each sub-menu point to itself. The only link with a target is in the menu frame. See the following routine code:
<HTML> <Title> welcome to my site! </Title>
</Head>
<Frameset Cols = "150, *">
<Frame name = "menu" src = "menu.htm">
<Frame name = "content" src = "intro.htm">
</Frameset>
<Body>
<! -- If the browser supports frame, the following content is not displayed; otherwise, a simple menu page is displayed. -->
Welcome to my site. <p>
<A href = "intro.htm"> introduction </a>
<A href = "products.htm"> Products </a>
<A href = "reviews.htm"> reviews </a>
</Body>
Use scripts to control navigation frame
The preceding section describes the HTML code structure of the frame. Now we start to take a deeper step: Use a script program to control the frame.
Each window object has a frames array. For common web pages, this array is empty, and its attribute length is 0. For a page with frameset, a frame array is generated according to the sequence before and after the <frame> mark. Since the page where frameset is located is the parent window of each frame, the array index starts from 0, so self is used when 3rd frames are referenced from frameset. frames [2]. parent is used when 3rd frames are referenced from other frame documents. frames [2].
Every member in the frame array is a window, which has all the methods, events, and attributes of a normal window, and includes its own frame array (when it contains another frameset ). Therefore, using a script to modify the content of a frame is as simple as modifying its location. href.
The following example shows that a frameset contains three identical frames located at the bottom of the window:
<Frameset rows = "60%, 40%">
<Frame name = "Link" src = "link.htm">
<Frameset Cols = "*, *, *">
<Frame name = "blank1" src = "blank.htm">
<Frame name = "blank2" src = "blank.htm">
<Frame name = "blank3" src = "blank.htm">
</Frameset>
</Frameset>
The document in the first frame is called link.htm. You can click a single link to modify the content in the other three frames. The implementation code is as follows:
<A href = "javascript: navall ()"> modify the content of the following three frames </a>
<Script language = "JavaScript"> <! --
Function navall (){
Parent. Frames [1]. Location. href = "red.htm ";
Parent. Frames [2]. Location. href = "blue.htm ";
Parent. Frames [3]. Location. href = "white.htm ";}
// --> </SCRIPT>
Use scripts to control dynamic frame
If there are not many changes in the frame content, you can use the script program to dynamically generate the content. In this way, you do not need to create a separate small HTML page, and do not need to download it from the server. The method for creating content is the same as that for writing content in any window.
Here is an example. Assume that you want to display photos of a group member in a frame and the member name and other information in a small frame. First, create an information array:
Empid = new array ();
Empid [0] = 'dana LLa, CEO ';
Empid [1] = 'arturo Montero, Senior editor ';
Empid [2] = 'percy Tercel, head designer ';
Empid [3] = 'Angus coupedeville, astrologer ';
Then, create a graphic map of group member photos, link each <area> to the function showme (n), and create information based on the index data:
Part1 = '<HTML> Part1 + = '<body bgcolor = # ffffff> <Div align = center> ';
Part2 = '</div> </body> Function showme (n ){
Parent.frames[12.16.doc ument. open ();
Parent.frames[12.16.doc ument. Write (Part1 );
Parent.frames[12.16.doc ument. Write (empid [N]);
Parent.frames[12.16.doc ument. writeln (Part2 );
Parent. Frames [1]. Close ();
}
Script control between frames
With JavaScript, you can access the window either from the page where the window is created or from the window created in the window. On the other hand, documents in frameset (including frameset itself) can always access and manipulate each of the JavaScript Functions and variables. For example, if the third frame contains the saygobble (VOL) function, you can use parent. Frames [2]. saygobble (VOL) in other frames to reference it. Similarly, the variable myname on the frameset page can be set by any frame using the parent. myname = "Imelda" command.
Functions and variables in static frame or frameset are always available regardless of the content in other frames. This feature is very valuable. It not only saves common functions to compress code, but also maintains the status during inter-page conversion.
The following framesetpage only has a frame called query.htm and defines a javascript variable myword:
<HTML> <Title> passing data </title>
<Script language = "JavaScript"> <! --
Myword = "";
// --> </SCRIPT>
</Head>
<Frameset rows = "*, 1" frameborder = NO>
<Frame name = "active" src = "query.htm">
<Frame name = "Dummy">
</Frameset>
</Html>
The page query.htmhas a text box and a link to result.htm. The linked onclick event sets the myword variable on the frameset page as the content of the text input box. The Code is as follows:
<HTML> <Body>
<Form name = "myform">
<Input type = text size = 12 name = "mytext">
<P>
<A onclick = "parent. myword = mytext. Value"
Href = "result.htm"> see it in yellow on Blue! </A>
</Form>
</Body>
The page result.htm retrieves and prints the value of myword. The code is:
<HTML>
<Head> <Body bgcolor = # 0000cc vlink = #99 FFFF>
<Font size = + 3 color = # FFFF00>
<Script language = "JavaScript"> <! --
Document. Write (parent. myword );
// --> </SCRIPT>
</Font> <p>
<A href = "query.htm"> Do It Again </a>
</Body>
This example is very useful. For example, you can set visitors to open pages in a certain order, collect user information, and customize the user-specific display content.
Speaking of the State maintenance function, this method will not be better than using cookies or CGI, because when frameset is overloaded or exited, the variable value will be lost. However, it does not require the server to respond, nor does it have security issues. Therefore, you can try it out.
Use scripts to control floating Frame
The method for controlling a normal frame by script is basically the same as that of a floating frame. The only difference is that a floating frame defines the index position in the order in which <IFRAME> appears. If frames. length is not 0, the floating frame can be processed safely. For example, in the following code, if a floating frame called floater exists, the link points to it; otherwise, it points to "_ top ":
<IFRAME name = "floater" src = "trog.htm" width = 200 Height = 200> </iframe>
<A href = "grot.html" target = "floater" onclick = "If (! Self. frames. length)
This.tar get = '_ top' "> see grot.htm </a>
A web page with a floating frame is the parent window of the frame document. Therefore, multiple floating frames can still access each frame through the parent. Frame array.
Prevent script programming errors
Although frame is a stable specification of HTML, the DOM model only treats them as HTML elements rather than Windows. Therefore, script programming around frame is not fully defined. This deficiency causes some conflicts in script execution when the frame is loaded.
The script that modifies the frame content immediately often produces errors. The reason is that the browser usually runs the script command first and then loads the page content according to SRC.
The solution is to determine whether the frame content is loaded. There is a good way to deal with all the frames starting from the HTML page. Please refer to loading the frame like the main frameset report. For example, if there is a frameset page, the function gotoit () can be executed only after all frames are loaded, then the following JavaScript program segment will be put into the frameset document:
Countdown = frames. length;
Function soundoff (){
Countdown --;
If (Countdown = 0 ){
Gotoit ();
}
}
Then, set onload = "parent. soundoff ()" in the <body> tag of each frame page ()". After the frame page is loaded and soundoff () is executed, when countdown is 0, the frame is fully loaded.
Summary
Frame is a double-edged sword. Poor use will cause chaotic site structures and appearances. Proper use will greatly facilitate users' operations and form a clear page style. I believe that you will have a better understanding of frame after reading this article.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
