FRAME (frame) is a page structure that is often seen on the web. Using a Visual Web development tool (such as Dreamweaver or FrontPage), although the frame can be built with a simple mouse-dragging in a WYSIWYG environment, it is critical to understand the frame's code structure carefully to achieve truly detailed and even powerful features. You will find that the frame was originally so kind and easy to use.
Create a basic frameset
Frameset pages are somewhat different from popular web pages. Although it still starts with <HTML> and the <HEAD> tags that contain headings and other scripts, its content is simply the layout design of the individual pages that are represented. Therefore, you no longer need to have <BODY> elements, just <FRAMESET> tags.
Through the <rows> and <cols> properties of <FRAMESET> tags, the browser window is split into squares. The setting value of <rows> and <cols> can be a fixed pixel value, a percentage value for the total space, or a proportional value for the split space that is represented by a * and a number multiplication. For example:
Cols= "80,20%,*" is divided into 3 columns, with a width of 80 pixels, a window width of 20%, and the remaining width
Rows= "25%,75%" is divided into 2 columns, with widths of 25% and 75% of the window width respectively
The rows= "*,3*" is divided into 2 columns, as indicated in the 2nd above, but differs in different ways: The first column has a width of 1/3 in the second column.
Between <FRAMESET> and </FRAMESET>, each partition is represented with multiple <FRAME> tags. Col represents columns from left to right, row represents rows from top to bottom. Each <FRAME> has a SRC attribute that gives the contents of the FRAME. It can be any legitimate URL that the browser can display, or another frameset. To prevent recursion, a frame cannot contain the frameset page in which it resides. To define the name of the frame with the Name property, you can reference it in code or in a script program. Take a look at a 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 the frame
A page with a frameset structure, the new document is only reproduced in a part of the window, while the other pages remain static. When the user clicks the link in the frame, the new content opens in the same frame. To have the new content open in another frame, you can set the target property value of the <A> tag to the name value of that frame.
Also, we can set the open target to be visible at any one frame, but not limited to its own frameset. The target may be a frame in a nested frameset, or it may be a frame in another window. However, if the target frame does not exist, a new window with the target frame name is generated.
Here is an example to illustrate that, assuming there is a simple frameset with 2-frame, the filename is called home.html, the code is as follows:
<HTML>
<frameset cols= "115,*" >
<frame src= "Menu.htm" >
<frame name= "Content" src= "main.htm" >
</FRAMESET>
</HTML>
The file menu.htm is in the left frame with a series of links, and the new content is clicked on to the right, which is opened in the frame called content. Here is the code for menu.html:
<HTML><HEAD></HEAD>
<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></HTML>
Note that target in the last link is defined as _parent, which belongs to 4 special reserved values. They are:
_parent: Displays the new href at the current frameset position.
_top: Displays a new href at the current entire window position, such as itself frameset in another frameset.
_self: Forces a new href to appear in the current frame.
_blank: Displays the href in a new window.
The <AREA> tag that represents the client graph map can also apply the target attribute, such as:
<area shape=circle coords= "75,75,50" href= "main.htm" target= "Content" alt= "Main Page" >
It is also often the case that most or all of the links in a Web page are required to be opened in a special frame. At this point, you can use the <BASE> tag in the page's <HEAD> code area to set the default target, and then define the target value for the special link separately.
modifier Frame
Frameset not only has controllable values in terms of width and height, but also can be set accurately in aesthetics.
By default, the frameset frame has a raised edge that represents the split effect. If you do not like this, want to create a "seamless connection" effect, you can set in the <FRAME> tag frameborder=0 to eliminate it. In 3.0 and later versions of Navigator and Internet Explorer, if you set frameborder=0 in the <FRAMESET> tag, then, in addition to the frame set to Frameborder=1, The edges of all other frame will disappear.
Although the frameborder=0 is set, some browsers still retain some edge color marks between the frame. In this case, you can add framespacing=0 (to Internet Explorer) or border=0 (to navigator and opera) in the <FRAMESET> tag to achieve a truly seamless connection.
See how these properties are used by the following code:
<HTML>
<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>
There are 2 new properties in the above code: Noresize indicates that the frame is locked and the mouse is not allowed to resize, Scrolling=no represents the scroll bar of the shielding frame, Scrolling=yes is allowed, scrolling= Auto indicates that scroll bars are automatically displayed according to the display content.
Floating frame
Floating frame is a definition in the HTML4.0 specification and is supported by current browsers.
Unlike the split area represented by frameset, a floating frame exists on a Web page as a built-in object, and its style is like a graphic or applet on a page. The floating FRAME uses the <IFRAME> tag, which has most of the same property settings as <FRAME>, including: Name, SRC, marginwidth, marginheight, Frameborder and scrolling. It also has the same height, width, and align attributes as a graphic or applet.
Furthermore, the floating frame follows the target principle like a normal frame: we can point to it by its name. This principle applies to a floating frame in any type of frame, whereas it is easy to do so. A traget link in a floating frame points to itself, while the _parent link points to the frame or window containing the <IFRAME> document. Like what:
<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 that any content located between <IFRAME> and </IFRAME> will be ignored for browsers that support <IFRAME> markup. Instead, the contents are 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 window changes, while the other parts remain unchanged. Using this feature, you can implement the toolbar navigation function, a frame inside the static menu page, the user clicks on the item, in another frame to display the relevant content. This reduces the file size as a whole because you do not have to include menu items in each content page.
The frame has 2 obvious deficiencies:
Frame increases the management of the site from another level, because the hyperlinks are not only directed to the appropriate page, but are also loaded into the relevant frame.
In addition, most browsers can only record the initial position of the frameset when they perform a "Add bookmark" operation. No matter how deep the frameset is when you add a bookmark, when you select the bookmark again, it is returned to the initial page of frameset. This increases the difficulty of visitors browsing the specified content.
However, if the site information is properly organized so that navigation is only a few layers deep, then the use of frame can serve visitors well. Remember: Visitors want simple navigation information.
Of course, navigation is not the only reason to use frame, you can also use frame to create Exchange tools and Exchange pages. Furthermore, frame's multiple document frame structure is well-suited to being manipulated by JavaScript applications.
Design site with frame
The most commonly used frame structure is "menu-content" FRAMESET. A frame inside the navigation menu, another frame to reprint the submenu, each submenu links point to itself. The only link with target is in the menu frame. Take a look at the following routine code:
<HTML><HEAD>
<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 it is a browser that supports frame, the following is not displayed; otherwise, it shows a simple menu page-->
Welcome to my site.<p>
<a href= "intro.htm" >Introduction</A>
<a href= "Products.htm" >Products</A>
<a href= "reviews.htm" >Reviews</A>
</BODY></HTML>
using script to control the navigation frame
The HTML code structure of frame is described above, and now it is going a step further: using script to program the frame.
Each Window object has a frames array. For a normal web page, the array is empty and has a property length of 0. A frameset page that generates an array of arrays according to the order in which they are marked on <FRAME>. Since the frameset page is the parent window for each frame, the array index starts at 0, so use self.frames[2 when referencing the 3rd frame from frameset. Use parent.frames[2 when referencing the 3rd frame from another frame document.
Each member of the frame array is a window that has all the methods, events, and properties of the normal window, and includes its own frame array (when it contains another frameset). Therefore, scripting to modify the contents of a frame is as simple as modifying its location.href.
As an example, suppose a frameset contains 3 identical frame, all 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, and you can modify the contents of the other three frame by clicking on the single link. The implementation code is as follows:
<a href= "Javascript:navall ()" > Modify the contents of the following 3 frame </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>
using script to control dynamic frame
If there is not much change in the frame, consider using a scripting program to dynamically generate its content. This eliminates the need to create separate small HTML pages without downloading them from the server. You create content in the same way that you write content in any window, all through the Document object.
Give an example to illustrate. Suppose you want to display a photo of a team member in a frame and display information such as the name of the member in a small frame below it. First, set up an array of information:
EmpID = new Array ();
Empid[0] = ' Dana Corolla, CEO ';
Empid[1] = ' Arturo Montero, Senior editor ';
EMPID[2] = ' Percy tercel, head designer ';
EMPID[3] = ' Angus Coupedeville, astrologer ';
Then, create a graphical map of the team members ' photos, and link each <AREA> to the function ShowMe (n), which is responsible for creating the information based on the indexed data:
Part1 = ' <HTML><HEAD></HEAD> ';
part1+= ' <body bgcolor= #ffffff ><div align=center> ';
Part2 = ' </DIV></BODY></HTML> ';
function ShowMe (n) {
Parent. Frames[1].document.open ();
Parent. Frames[1].document.write (part1);
Parent. Frames[1].document.write (Empid[n]);
Parent. Frames[1].document.writeln (part2);
Parent. Frames[1].close ();
}
script control between frame
With JavaScript, we can access that window either from the page where the window was created, or from the window created by the window. On the other hand, documents in frameset (including the frameset itself) can always access and manipulate each of the JavaScript functions and variables. For example, a function Saygobble (vol) in the third frame can be referenced using Parent.frames[2].saygobble (vol) in the other frame. Similarly, variable myname in a frameset page can be set by any frame with parent.myname= "Imelda" commands.
Functions and variables in a static frame or frameset are always available, regardless of the contents of the other frame. This feature is very valuable, not only can you save the common function in which to compress the code, but also to achieve the transition between the page state maintenance.
The following frameset page has only one frame called query.htm and defines a JavaScript variable MyWord:
<HTML><HEAD>
<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>
Page query.htm has a text input box and a link to the result.htm, the link onclick event will set the frameset page's MyWord variable to the text input box contents. The code is as follows:
<HTML><HEAD></HEAD>
<BODY>
<form name= "MyForm" >
<input type=text size=12 name= "MyText" >
<P>
<a
href= "Result.htm" >see it in yellow on blue!</a>
</FORM>
</BODY></HTML>
The page result.htm retrieve and print out the MyWord value, which is:
<HTML>
<HEAD></HEAD>
<body bgcolor= #0000cc vlink= #99ffff >
<font size=+3 color= #ffff00 >
<script language= "JavaScript" ><!--
document.write (Parent.myword);
--></script>
</FONT><P>
<a href= "Query.htm" >do it again</a>
</BODY></HTML>
This example is of practical value. For example, you can set the visitor to open the page in a certain order, collect the user information, and finally customize the user's specially crafted display content.
When it comes to state maintenance, this method is no better than using cookies or CGI because the value of the variable is lost when the frameset is overloaded or exited. However, it does not require a server-side response, there is no security issues, so you can still try a small.
controlling floating frame with script
The only difference between using a script to control a normal frame and a floating frame is that the floating frame defines the index position in the order in which the <IFRAME> appears. If the frames.length is not 0, it means that the floating frame can be handled safely. For example, in the following code, if there is a floating frame called floater, 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" >see grot.htm</a>
A Web page with a floating frame is the parent window of a frame document, so multiple floating frame can still access each frame through a parent.frame array.
prevent script programming errors
Although frame is a stable specification for HTML, the DOM model treats them as HTML elements rather than windows, so scripting around the frame is not well defined. This deficiency causes some scripting execution conflicts to occur when the frame is loaded.
Scripts that immediately modify the frame content often produce errors. The reason: Browsers usually execute script commands first, and then load the page content as shown in SRC.
The solution is straightforward, which is to determine whether the frame content is loaded. A good handling technique is to start all the frame with an HTML page, by it like the main FRAMESET report load please see. For example, if you have a frameset page that performs function gotoit () after loading all of the frame, then put the following JavaScript program segment into the frameset document:
Countdown=frames.length;
function Soundoff () {
countdown--;
if (countdown==0) {
Gotoit ();
}
}
Then, set on the <BODY> tag of each frame page. When the frame page loads and executes Soundoff (), wait until countdown is 0 o'clock to indicate that the frame is fully loaded.
Summary
Frame is a double-edged sword, the use of bad will cause confusion of the site structure and appearance, use properly will greatly facilitate the user's operation and form a clear page style. I believe you will have a more cordial 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
