Quick mastery of the use of frame

The

Frame (frame) is the structure of the page 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. The

Create a basic frameset   

Frameset page is somewhat different from a popular web page. Although it still starts with the and the tag that contains the caption, and other scripts, the content is just the layout design of the individual pages that are represented. Therefore, you no longer need the element, just the tag.  &NBSP

The browser window is split into a grid by using the tagged and properties. The setting value of and 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, 80 pixels wide, 20% window width, and remaining width   ,
rows= "25%,75%" into 2 columns,　　The width is 25% and 75%   of the window width respectively, and
rows= "*,3*" is divided into 2 columns as indicated in the 2nd above, but differs in different ways: the first column is of the second column width 1/3  

Between and , each partition is represented by multiple tags. Col represents columns from left to right, row represents rows from top to bottom. Each 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:

Simple 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 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:

Frommco home page

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:

main page

our mission

our staff

frommco splash page

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 tag that represents the client's graphical map can also apply the target attribute, such as:

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 set the default target in the page's code area using tag, 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, you want to create a "seamless connection" effect, you can set the frameborder=0 in the tag to eliminate it. In 3.0 and later versions of Navigator and Internet Explorer, if you set up frameborder=0 in the 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 tag to achieve a truly seamless connection.

See how these properties are used by the following code:

Frommco home page

The above code has 2 new properties: 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. The

floating frame   

Floating frame is a definition in the HTML4.0 specification and is supported by the current browser.  &NBSP

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 an applet on a page. A floating FRAME uses the 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.  &NBSP <br> <br> Also, 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 where the document containing <IFRAME> is located. For example:   </p>

<br>width=150 height=200 hspace=10 align=right><br>

show one.htm

show two.htm

bring back start.htm

Note that any content between and is ignored for browsers that support markup. Instead, the contents are displayed, which can be used as an explanation that the current browser does not support <IFRAME>.<br><br>　　<strong>when to use frame</strong><br><br>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.<br><br>The frame has 2 obvious deficiencies:</p>

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:

Welcome to my site!



!--if it is a browser that supports frame, the following content will not appear; otherwise, it shows a simple menu page-->
Welcome to my site.

introduction
products
reviews

　　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 page with frameset that generates an array of arrays, in order of the tags on them. 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:

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:

　　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 to the function ShowMe (n), which is responsible for creating the information based on the indexed data:

Part1 = ' ';
part1+= '

';
Part2 = '

';
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:

Passing Data

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:

href= "Result.htm" >see it in yellow on blue!

The page result.htm retrieve and print out the MyWord value, which is:

do It again

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 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":</p>

see grot.htm

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 tag for 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.

　Summarize

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.