The frame of JS

1 Framework Programming Overview
An HTML page can have one or more child frames, which are tagged with <iframe> to display a
A separate HTML page. The framework programming described here includes self-control of the framework and mutual access between frames,
For example, reference a JavaScript variable in another frame from one frame, call a function within another frame, control another
The behavior of the form in a frame.

2 cross-references between frames
All frames in a page are provided as a collection of properties for the Window object, for example:
Window.frames represents the collection of all frames within the page, and this is the form object, the linked object, the picture object, and so on.
Similarly, the collection is a property of the document. Therefore, to reference a child frame, you can use the
The following syntax:
window.frames["FrameName"];
Window.frames.frameName
Window.frames[index]
The window typeface can also be replaced or omitted with self, assuming that FrameName is the first frame in the page,
The following notation is equivalent:
self.frames["FrameName"]
Self.frames[0]
Frames[0]
FrameName
Knowing how to reference a framework, what exactly is the referenced framework? In fact, each frame corresponds
An HTML page, so this frame is also a standalone browser window that has all the properties of the window,
A reference to a frame is a reference to a Window object. With this window object, it is easy to
Pages, such as using the Window.document object to write data to the page, using the Window.location
property to change the page within the frame, and so on.
The following sections describe the mutual references between different levels of frames:
2.1. Parent frame-to-child frame references
Knowing the above principle, it is very easy to refer to a child frame from the parent frame, i.e.:
window.frames["FrameName"];
This refers to a child frame named FrameName within the page. If you want to refer to a child frame within a child frame, depending on
The referenced frame is actually the property of the Window object, which can be implemented as follows:
window.frames["FrameName"].frames["frameName2"];
This refers to the level two sub-framework, and so on, you can implement a multi-layered framework reference.
2.2. A reference to the parent frame of a child frame
Each Window object has a parent property that represents its parents frame. If the frame is already a top-level frame,
Then Window.parent also represents the framework itself.
2.3. A reference between brothers frames
If the two frames are the same as a frame's sub-framework, they are called the sibling framework and can be implemented through the parent framework to achieve mutual
References, such as a page consisting of 2 sub-frames:
<frameset rows= "50%,50%" >
<frame src= "1.html" name= "frame1"/>
<frame src= "2.html" name= "frame2"/>
</frameset>
In Frame1, you can use the following statement to refer to frame2:
self.parent.frames["Frame2"];
2.4. Mutual references between different levels of frames
The hierarchy of frames is for the top-level framework. When the hierarchy is different, just know your level and another
The hierarchy and name of a frame, which can be easily accessed by using the nature of the window object referenced by the framework,
For example:
self.parent.frames["ChildName"].frames["Targetframename"];
2.5. References to top-level frames
Like the Parent property, the Window object also has a top property. It represents a reference to the top-level frame, which can be
To determine whether a frame itself is a top-level frame, for example:
Determine if the frame is a top-level frame
if (self==top) {
DoSomething
}

3 Changing the Frame loading page
As already mentioned, a reference to a frame is a reference to the Window object, taking advantage of the window object's location
property, you can 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, which, using this property, can even use a chain
To update multiple frames.
<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-->

4 referencing JavaScript variables and functions in other frames
Before you introduce techniques that reference JavaScript variables and functions in other frameworks, let's look at the following code:
<script language= "JavaScript" type= "Text/javascript" >
<!--
function Hello () {
Alert ("hello,ajax!");
}
Window.hello ();
-
</script>
If you run this code, it will pop up "hello,ajax!" window, which is exactly the result of executing the hello () function.
So why does hello () become the method of the Window object? In fact, all global variables defined within a page
and global functions are all members of the Window object. For example:
var a=1;
alert (WINDOW.A);
A popup dialog box appears as 1. The same principle, sharing variables and functions between different frameworks, is to pass
The Window object to invoke.
In order to facilitate the understanding of everyone, the following examples illustrate. A product Browse page consists of two sub-frames, and the left side represents
A link to the classification of goods; When the user clicks the category link, the appropriate item list is displayed on the right, and the user can click the item next to
"Buy" link to add items to your shopping cart.
In this example, you can use the left navigation page to store the product that the user wants to buy, because when the user clicks the Guide
Link, the change is another page, that is, the product display page, and the navigation page itself is unchanged, so that
JavaScript variables are not lost and can be used to store global data. The implementation principle is as follows:
Suppose the left page is links.html, the right page is show.html and the page structure is 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 such a statement next to the item shown in show.html:
<a href= "void (0)" onclick= "Self.parent.link.addToOrders (32068)" > Add to Cart </a>
Where link represents the navigation framework, the arrorders array is defined in the Link.html page to store the product ID,
The number of addtoorders () is used to respond to the Click event of the "purchase" link next to the item, which receives a parameter ID indicating the product's
ID, an example of an item with an ID of 32068:
<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 on the shopping cart page.
The framework enables a single page to be divided into multiple, functionally independent modules, each of which is independent of each other, but can be
It is an important mechanism in web development to establish a connection by referencing a Window object. In AJAX development, you can also
To use the hidden framework to implement a variety of techniques, in the following introduction of Ajax instance programming can be found, no refresh upload files to
and solve the Ajax forward and backward problems will use this technology.


Excerpt from: http://www.blogjava.net/lusm/archive/2008/02/11/179620.html


1.window.frameelement is the IFRAME or frame object that contains this page.
2.
(1) From the window containing the IFRAME to access the contents of the contained IFRAME form:
var IFR = ...//access to the desired iframe control, relatively simple, write yourself
ifr.window.document.............//access to your own hierarchical relationship
(2) Accessing the parent window from the contained iframe form
Window.opener.document ........

/**
* If the page is in a pop-up window, close the popup window
*/
Porglobals.closepop = function () {
if (window.frameelement) {
var pop = Window.frameElement.popPanel;
if (POP) {
Pop.close ();
}
}
};
/**
* If the page is ejected by a popup control, return the popup window value and close the popup window
*/
Porglobals.closeandreturn = function () {
if (window.frameelement) {
var w = window.frameElement.targetWidget;
if (W) {
W.val (Window.returnvalue);
}
}
Porglobals.closepop ();
};

The frame of JS