Application of 1.HTML Frame frameset
Framework programming Overview An HTML page can have one or more child frames, which are marked with <iframe> to display a separate HTML page. Framework programming here includes the self-control of the framework and the mutual access between frameworks, such as referencing JavaScript variables from one frame to another, calling functions within other frameworks, controlling the behavior of forms in another frame, and so on.
Mutual reference between frames: all frames in a page are provided as properties of the Window object in the form of a collection, for example: Window.frames represents a collection of all the frames within the page, similar to the form objects, linked objects, picture objects, and so on, unlike the These collections are attributes of the document. Therefore, to refer to a child frame, you can use the following syntax:
Copy Code code as follows:
window.frames["FrameName"];
Window.frames.frameName;
Window.frames[index];
Where the window typeface can also be replaced or omitted with self, assuming that FrameName is the first frame in the page, the following is equivalent:
self.frames["FrameName"]==self.frames[0]==frames[0]
Each frame corresponds to an HTML page, so the frame is also a standalone browser window that has all the properties of a window, a reference to a frame that is a reference to a Window object. With this Window object, you can easily manipulate the pages in it, such as using the Window.document object to write data to the page, using the Window.location property to change the page inside the frame, and so on. The following are references to each other between different levels of frameworks:
1 references to the parent frame to the child frame
Knowing the above principle, it is very easy to refer to the child frame from the parent frame, namely: window.frames["FrameName"]; This refers to a child frame named FrameName within the page. If you want to refer to the child frame within the child frame, according to the frame of reference is actually the nature of the Window object, you can do this: window.frames["FrameName"].frames["frameName2"]; This refers to a two-level child framework, and so on, you can implement a reference to a multi-tier framework.
2 the child frame to the parent frame reference
Each Window object has a parent attribute, which represents its parental frame. If the frame is already a top-level frame, window.parent also represents the framework itself.
3 References between brothers frames
If two frames are a child of a framework, they are called sibling frameworks, and can be referenced through the parent framework, such as a page that includes 2 child frames:
Copy Code code as follows:
<frameset rows= "50%,50%" >
<frame src= "1.html" name= "frame1"/>
<frame src= "2.html" name= "frame2"/>
</frameset>
You can use the following statement to refer to frame2 in frame1:
self.parent.frames["Frame2"];
4 Mutual reference between different levels of frames
The hierarchy of the framework is for the top level framework. When the levels are different, you can easily access each other by knowing your level and the level and name of the other frame, using the Window object properties referenced by the framework, for example: self.parent.frames["ChildName"].frames[" Targetframename "];
5 reference to the top-level frame
Like the Parent property, the Window object also has a top property. It represents a reference to the top-level framework, which can be used to determine whether a frame itself is a top-level frame, for example:
Determine if this frame is a top-level frame
if (self==top) {//dosomething}
Changing the loading page of a frame: a reference to a frame is a reference to a Window object, taking advantage of the Location property of the Window object to change the navigation of the frame, for example:
Window.frames[0].location= "1.html"; This redirects the page of the first frame in the page to 1.html, using this property to even update multiple frames with a single link:
Copy Code code as follows:
<frameset rows= "50%,50%" >
<frame src= "1.html" name= "frame1"/>
<frame src= "2.html" name= "frame2"/>
</frameset>
<!--somecode-->
<a href= "frame1.location= ' 3.html;frame2.location= ' 4.html '" onclick= "" >link</a>
<!--somecode-->
referencing JavaScript variables and functions within other frameworks: before introducing techniques for referencing JavaScript variables and functions within other frameworks, look at the following code:
Copy Code code as follows:
<script language= "JavaScript" type= "Text/javascript" >
<!--
function Hello () {
Alert ("hello,ajax!");
}
Window.hello ();
-->
</script>
If this code is run, "hello,ajax!" will pop up. window, which is the result of performing the Hello () function. So why does hello () become a Window object method? Because all global variables and global functions defined within a page are members of the Window object. For example: Var a=1; alert (WINDOW.A); The pop-up dialog box is displayed as 1. The same principle of sharing variables and functions between different frames is to be invoked through the Window object. For example:
A Product browsing page consists of two sub frames, and the left-hand side represents a link to the product category; When the user clicks the category link, the appropriate list of items is displayed on the right, and the user can click the "Buy" link next to the item to add the item to the cart.
In this case, you can use the navigation page on the left to store the goods that the user wants to buy, because when the user clicks the navigation link, it changes another page, the product display page, and the navigation page itself is unchanged, so the JavaScript variable is not lost and can be used to store global data. The principle of its implementation is as follows: Suppose the left page is link.html, the right page is show.html, the page structure is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<title> New Document </title>
<frameset cols= "20%,80%" >
<frame src= "link.html" name= "link"/>
<frame src= "show.html" name= "Show"/>
</frameset>
You can add a statement next to a product displayed in show.html:
<a href= "void (0)" onclick= "Self.parent.link.addToOrders (32068)" > Add Shopping Cart </a>
Link represents the navigation framework, the arrorders array is defined in the Link.html page to store the ID of the product, and the function addtoorders () is used to respond to the Click event of the "buy" link next to the product, and the parameter ID it receives indicates the ID of the product. The example is a product with an ID of 32068:
Copy Code code as follows:
<script language= "JavaScript" type= "Text/javascript" >
<!--
var arrorders=new Array ();
function Addtoorders (ID) {
Arrorders.push (ID);
}
-->
</script>
This way, you can use Arrorders to get all the items you want to buy on the checkout page or the Shopping Cart browsing page. The framework can divide a page into functionally independent modules, each module is independent of each other, but can be linked through the reference of Window objects, is an important mechanism in web development. In AJAX development, you can also use the hidden framework to implement a variety of techniques, AJAX implementation of no refresh upload files and solve the Ajax forward backward problem will use this technology.
2. How to change the size of frame and iframe dynamically?
Change Frame size:
Copy Code code as follows:
Index.html
<meta name= "generator" content= "Microsoft FrontPage 5.0" >
<meta name= "ProgId" content= "FrontPage.Editor.Document" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> dynamically changing frame size </title>
<frameset name= "full" rows= "50%,50%" >
<frame src= "Main.htm" >
<frame src= "Main.htm" >
</FRAMESET>
2.main.htm
Copy Code code as follows:
<HTML>
<title>form Object example</title>
<HEAD>
<script language= "JavaScript" >
function Fttop () {
if (document.getElementById ("Yltop"). value== "Hide Upper") {
document.getElementById ("Yltop"). value= "Hidden Lower";
Parent.full.rows= "0,*";
}else{
document.getElementById ("Yltop"). value= "Hidden Upper";
Parent.full.rows= "*,0";
}
}
function Ftall ()
{
Parent.full.rows= "50%,50%";
}
</SCRIPT>
</HEAD>
<BODY>
<form name= "Evalform" method= "Get" >
<input type= "button" Name= "Yltop" id= "Yltop" onclick= "fttop ();" value= "Hidden Upper" >
<input type= "button" name= "Ylall id=" Ylall "onclick=" Ftall (); "Value= Show All" >
</FORM>
</BODY>
</HTML>
Run index.html
Change the size of the IFRAME:
Copy Code code as follows:
<iframe id= "frame1" src= "1.htm" width= "100px" height= "100px" >
</iframe>
<br>
<input type= "button" value= "Widen" onclick= "Addwidth ()" >
<input type= "button" value= "heightening" onclick= "Addheight ()" >
<script language= "JavaScript" >
function Addwidth ()
{
var O=document.getelementbyid ("Frame1");
O.width=eval (o.width) +10;
}
function Addheight ()
{
var O=document.getelementbyid ("Frame1");
O.height=eval (o.height) +10;
}
</script>
