Framework
1FRAMESET identifiers
The frameset identifier can be used to divide 1 pages into frames, frameset container identifiers have several features, 2 of which are rows and cols. such as: <frameset rows= "35%,*" >
Frame identifier
Within the frameset container, the frame identifier is used to determine which file should be displayed within each frame. The URL of the file should be determined with the SRC attribute. Here the relative and absolute refers to determining the location of the file in HTML in 2 different ways. In the absolute URL, provide the full path to the 1 files. The relative URL value corresponds to the location of the current file.
<frameset rows= "35%,*" >
<frame src= "menu.html" >
<frame src= "welcome.html" >
</frameset>
Properties and methods for frame objects (including IFRAME)
Name, which represents the name of the frame
Frames, which represents the frame group contained in the frame
Document, which represents the documents displayed in the frame
Length, which indicates the number of sub-frames contained in the frame
Parent, the previous level frame of the current frame
Self, which represents the current frame
Top, which represents the topmost frame in the current browser window
Blur () to place the current frame behind all other windows
Focus (), placing the current frame in the signature of all other windows
Settimeout,setinterval,cleartimeout,clearinterval
Print () To display the Printing dialog box.
SRC, the value is the URL string.
The noresize of the <FRAME> marker indicates that the frame size cannot be changed.
Self.name can get the name of the frame directly, but if the frame has an ID it cannot be obtained by self.id.
Naming Frames
To place the results of a link or form submission into a specified window, you can use the name attribute of the frame identifier to name the framework.
<frameset cols= "50%,*" >
<frame src= "menu.html" name= "Menu" >
<frame src= "welcome.html" name= "main" >
</frameset>
You can use the target feature to capture the main frame with hypertext references. Such as:
<a href= "choice.html" target= "main" >
Similarly, the results of a form submission can also be captured in the same way:
<form method=post action= "" target= "main" >
IE7,IE8, the right side of the IFRAME always reserves a blank scroll bar position, you can add Padding:0px;margin:0px;overflow:auto in the body of the page that the IFRAME loads, you can eliminate the whitespace.
Framework Programming
An HTML page can have one or more child frames, which are tagged with <iframe> to display a separate HTML page. The framework programming described here includes self-control of the framework and mutual access between frames, such as referencing JavaScript variables in another frame from one framework, invoking functions within other frames, controlling the behavior of forms in another frame, and so on.
Cross-referencing between frames
All frames in a page are provided as a collection of properties for the Window object, for example: Window.frames represents a collection of all frames within that page, similar to form objects, linked objects, picture objects, and so on, which are attributes of the document. Therefore, to reference a child frame, you can use the following syntax:
window.frames["FrameName"];
Window.frames.frameName
Window.frames[index]
Where the Word window 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
Each frame corresponds to an HTML page, so the framework is also a separate browser window that has all the properties of the window, and the so-called reference to the frame is a reference to the 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 pages within the frame, and so on.
The following sections describe the mutual references between different levels of frames:
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, according to the referenced frame is actually the nature of the Window object, you can do this:
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. 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, window.parent also represents the framework itself.
3. A reference between brothers frames
If two frames are the same as a frame's sub-framework, they are called sibling frames, and can be referenced through the parent framework, 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"];
4. Mutual references between different levels of frames
The hierarchy of frames is for the top-level framework. When the hierarchy is different, you can easily access each other by the nature of the window object referenced by the framework, as long as you know your level and the hierarchy and name of another frame, for example:
self.parent.frames["ChildName"].frames["Targetframename"];
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 used 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
}
Changing the loading page of a frame
A reference to a frame is a reference to a Window object, and with the Location property of the Window object, 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, and with this nature, you can even update multiple frames with a single link.
<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 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? 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);
A popup dialog box appears as 1. The same principle, the sharing of variables and functions between different frameworks is to be called through the Window object.
For example: A product browsing page consists of two sub-frames, the left side represents the link of the product category, when the user clicks the category link, the right side displays the corresponding product list; The user can click the "Buy" link next to the item to add the item to the 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 navigation link, the other page is changed, namely the product Display page, and the navigation page itself is immutable, so the JavaScript variables are not lost and can be used to store global data. The implementation principle is as follows:
Suppose the left page is link.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, and the function addtoorders () is used to respond to the Click event of the "buy" link next to the item, which receives the ID of the item, The example is 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 can divide a page into multiple, functionally independent modules, each of which is independent of each other, but can be linked by a reference to a Window object, which is an important mechanism in web development.
In addition to capturing named frames, there are several special items available for the target attribute:
_blank, causing the link to load within the new unnamed window.
_self, which causes the link to load in the window that is clicked.
_parent, the resulting link is loaded in the Framset's immediate parent window.
_top, causing the link to load within the entire window body.
The window.open () method is used to open the document window:
window.open ("http://www.baidu.com", "_self");
Opens in this window.
Use of frames in 2javascript
JavaScript provides the Frames property of the Window object to work with the different frameworks of the script. The Frames property is an array of objects that has 1 items in the parent frameset for each child frame. The number of frames is provided by the length property. You can also find the frame by the name of the frame frame, parent.frames["frame frame name"]
For example, if a given window or frameset has 2 frames, the 2 frames can be represented as parent.frames[0] and parent.frames[1], and the last frame will have an index of parent.frames.length.
Each frame has a different document, location, and a History object corresponding to it. This is because each frame contains its own HTML document and has its own history list. For example: Parent.frames[1].document.forms[0] To do the first form in a second child frame.
<script language= "JavaScript" >
<!--
function yunxing () {
Manipulate elements in other frames.
parent.frames[0].document.forms[0].weight.value=60;
parent.frames[0].document.forms[0].height.value=1.71;
Parent.frames[0].document.forms[0].enter.click ();
}
-
</script>
<body>
<input type= "button" Name= "Yunx" value= "Run" onclick= "yunxing ()" >
</body>
2document objects
The Document object is defined when the body identifier within the HTML page is evaluated, and the object remains there as long as the page is loaded.
Body identifier
The body identifier defines the theme of the HTML document, and its attributes enable HTML programmers to define the color of text and links, as well as the background color or pattern of the document. There are 2 event handlers onload and onunload available for the body identifier.
The character of the body identifier:
BACKGROUND, determining the background image to the URL
BGCOLOR, determines the background color of the document in hexadecimal RGB tri-colors or color names.
Fgcolor, the color of the foreground is determined by the hexadecimal tri-color.
Link to determine the color of the links in hexadecimal tri-colors.
ALINK, determines the active link in hexadecimal tri-color.
Properties of the Document object
Alinkcolor, an RGB value that represents the active connection color in 16 almost three primaries.
Anchors, an array of objects corresponding to each named anchor in the document.
BgColor, the RGB value of the background color represented by a 16-by-three color.
Cookies, which contain the cookie value of the current document.
A fgcolor that represents the RGB value of the foreground color expressed in hexadecimal tri-colors.
Forms, an array of objects corresponding to each form in the document.
A lastmodified that contains a string that modifies the last date of the document.
LinkColor the RGB value of the link, expressed in hexadecimal tri-color.
Links, an array of objects corresponding to each link in the document.
Location, which defines the entire URL of the Document object.
A referrer that contains the URL that invokes the current document.
Title, a string containing the title of the document.
Froms[] Property, when there is more than one form in the document, the form is stored as an array in the document.forms[] property. To find out how many form objects are in the current document, use Document.forms.length to get them.
A latmodidied that represents the time that the document was modified after the pair.
Images[], which represents the information for all images in a document, each of which is an element of the array.
Links[], which represents all the super-connection information in the document.
Method of Document Object
In addition to the write () and Writeln () methods mentioned earlier, the Document object provides other 3 methods: Close () and clear ().
The close () method closes the document window to be written.
The clear () method clears the current document window.
document.getElementById ("ElementID"), finds the element in the document by ID, and returns a reference to that element.
Document.getelementbyname ("ElementName"), finds the element in the document by name, returns a reference to the element
document.all. Element name/ID, find the element by name or ID.
Anchor Array
Although HTML <A> identifiers are often used to define hypertext links for other documents, it can also be used to define named anchors in a document, so that internal links can occasionally jump to other parts of the document.
For example:
<title>anchors example</title>
<body>
<a name= "One" >anchor one are here
HTML code
<a name= "I" >anchor
More HTML code
<a href= "#one" >go back to anchor One</a><br>
<a href= "#two" >go back to anchor Two</a><br>
</body>
JavaScript provides a measure of the anchors array as a way to access information and methods related to anchors in the current document. Each element in the array is a anchor object, and as with all arrays, the array has the length property.
Link Object
The link object belongs to the Document object, and the link object is the same as the <A> tag (when the tag has an href attribute). A document can have any number of links, so a linked reference is often implemented by means of an array index:
Document.links[n].propertyname
such as: document.links[0].href= "http://wwww.baidu.com"
When you want to run a script by clicking a link instead of navigating directly to another URL, you can invoke the script function by constructing an href attribute. This technique is called the pseudo-URL of javascript:url. If you put the function name behind Javascript:url, then the script browser will run the function. The syntax of this structure in the link is as follows:
<a href= "javascript:void functionname ([Parameter1] ... [Parametern]) " >...</A>
The void keyword prevents any value that the link display function will return. Javascript:url technology, which applies to all tags including href and src attributes. A property can even accept the URL as its value, and it can receive the Javascript:url
Location Object
The Location object provides several properties and methods for working with the position of the object. The following are properties and methods:
Hash, anchor name (text after the # Sign of the href attribute)
Host name or port of the Host,url
Host name of the Hostname,url
href, all URLs as a string
Pathname, file path (part of the URL that follows the third slash)
The Port,url port. If there is no port number, then an empty string.
Protocol,url part of the protocol (e.g., Http,gopher or FTP)
Search, in the URL is in the greeting (?) The following form array or query.
ToString (), which returns LOCATION.HREF as a string.
3window objects
The topmost layer of the Document object hierarchy is the Window object. Because the Window object is the primary container for all content of the Web browser.
Create window
Open (Url,window_name[,window features])
The method for generating a new window is window.open (), which has three parameters to define the window properties, such as the URL to load the document, the target property used in the HTML markup language, and the size of the reference target. Such as:
var subwindow=window.open ("Define.html", "Def", "status,height=200,width=300")
When you run the window.open () method, it opens a new window based not only on the specified set of parameters, but also a reference to the new window. Assigning a reference to a variable allows you to manipulate the window with this variable.
The possible parameters for window features are:
Height of the window.
Width of the window.
Left, and the window is positioned from the side of the screen.
Top, the position of the window from the top of the screen.
toolbar, whether the Standard toolbar is displayed.
Location, whether the URL is displayed.
status, whether or not to display the State bar.
MenuBar, whether there is a menu bar.
Resizable, whether the window size can be changed.
Close the main window using the Window.close () method. 、
Properties and Methods for Window object windows
Window.status Property
This property is used to set the information displayed in the status bar. For example, to change the status bar text of a link, you should use the link object's onmouseover event handler to trigger an action. Setting the onmouseover event handling for the status bar requires an additional statement to return true, which must be part of the event handler.
<a href= "http://www.baidu.com" onmouseover= "window.status= ' open baidu.com '; return true" >baidu.com</A>
When you run them as inline scripts, you must separate the two statements with a good score.
Window.closed Property
This property is used to determine whether the window has been closed, returns true if it is closed, or false otherwise.
Window.history Property
Represents the history of the current window, which can be referenced in the Web page navigation.
Document property
Represents the current document object that is displayed in the current window.
Location Property
Represents information for the current URL that is displayed in the current window.
Name property
Represents the name of the current Window object
Opener Property
Indicates that the parent window of the current Window object is opened
Parent Property
Represents the parent window that contains the current window
Self property
Represents the current window
Length Property
Represents the number of frames in the current window
Top Property
Represents the topmost window in a series of nested browsers
Window.alert () method
This window method generates a dialog box that displays the text passed to the parameter. The alert () method does not require a reference window.
Alert ("This is a JavaScript Alert dialog")
Window.confirm () method
The confirmation dialog box has two buttons cancel and OK. It has a return value, and clicking the OK button returns a value of true. Click the Cancel button to return false.
Window.prompt () method
A prompt dialog box that displays pre-set information and provides a text field for user input replies. The method has two parameters, the first as a hint, if a string as the second argument, you can display a default answer in the Text field, if you do not need the default answer to pass an empty string. This method returns a value when the button is clicked, and a null value is returned when the Cancel button is clicked. Click the OK button to return to the string value you typed.
Window.focus () method
This method is the window that gets the focus.
Window.print () method
Equivalent to the browser's Print button to make the browser print the page.
Window.settimeout (Expression,time) method
Automatically executes the code represented by expression after a certain amount of time, in milliseconds. Returns an integer ID value
Window.setinterval (Expression,time) method
Set a time interval so that the code represented by expression can be executed periodically. The unit is in milliseconds. Returns an integer ID value.
Window.cleartimeout (ID) method
Cancels the scheduled operation of the SetTimeout setting.
Window.clearinterval (ID) method
Cancels the scheduled operation of the SetInterval setting.
Clipboarddata
Windowobj.clipboarddata
The Clipboarddata object is used to transfer data under script control, such as cutting, copying, pasting and other operations. There are three ways to use the Clipboarddata object model:
ClearData ([format]), delete data from the Clipboard, and if no formatted data is provided, all data will be deleted. The data format can be one of the following strings: Text, URL, File, HTML, Image. no return value.
GetData (format) to re-locate data in a specific format from the Clipboard. When the data is fetched, if the Clipboard is not empty, data can be obtained through a number of successive operations. The return value is a string.
SetData (Format,data), which stores string data in the following format: Text, URL, File, HTML, Image. For non-text data formats, the data must be a string that specifies the path or URL to the current content. Returns True when successfully transferring to the Clipboard. The return value is Boolean.
Closed
Windowobj.closed
The return value is Boolean,
ExecScript (), IE-specific window.execscript () method executes one or more script statements, which are passed as string expressions. Unlike the eval () function of JavaScript, the ExecScript () method does not return a value, and the method executes within the global variable space that owns the current document window.
Print ()
Windowobject.print (), there is no return value, which provides a script method that passes a window or frame from the frameset to the printer. When you print manually in any case, the Print dialog box is displayed. And let the user select the printer type.
Resizeby (Deltax,deltay) and Resizeto (outerwidth,outerheight), the user changes the size of the current browser window, and their adjustments affect the bottom right corner of the window. If you want to move the upper-left corner, use the Window.moveby () or Window.moveto () method.
OnLoad Event
This event is the event that is triggered when page loading is complete. Event handling for all objects will be placed in the <body> tag.
such as: <body onload= "a method name" >
ShowModalDialog ("URL" [, Arguments][,features])
Showmodalessdialog ("URL" [, Arguments][,features])
The modal dialog box returns a value instead of a modal dialog box that returns a Window object.
SizeToContent ()
Determines whether the window adjusts to the size that best fits the content display.
2Location objects
The Location object is the URL that represents the loading window. In most cases, the script is only interested in one property: the href attribute, which defines the full URL. Setting the Location.href property is the basic way for a script to navigate to another page:
location.href= "Http://ww.dannyg.com"
The use of Window.opener
In the Scripting browser, each window has a property called opener. This property contains a reference to a window or frame that holds some script, and the script's window.open () statement generates a child window. For the main browser window and frame, this value is null.
Window.opener returns a reference to the window that created the current window. For example: A uses the open () method to create B, then in B you can refer to a by opener and manipulate the elements in a. If you refresh A:javascript:opener.document.location.reload () in B. The B,opener value is null for pages that are not opened by using the open () method.
Use of the status bar
The JavaScript program enables the status bar to display custom messages for the user. This work is done primarily by the onmouseover event handler:
<title>status example</title>
<body>
<a href= "home.html" onmouseover= "self.status= ' Go home! '; return true; " >home</A>
<a href= "next.html" onmouseover= "self.status= ' Go to the next page! '; return true; " >next</A>
</body>
4Event objects
The event object is a special object that is only relevant to the event-handling process, which is a JavaScript built-in object that can be described by a number of properties to describe a JavaScript event. The event object is able to accept information about the events and the state of the browser and page when the event occurs.
Properties of the event object related to IE:
Altkey is true when the ALT key is pressed.
Ctrlkey is true when the CTRL key is pressed.
Shiftkey is true when the SHIFT key is pressed.
button, the mouse button that is pressed when the event occurs (0 means that no key is pressed, 1 means that the left key is pressed, and 2 means that the right key is pressed).
Clienx, the mouse cursor wants horizontal coordinates for the client area of the window where the event is located.
ClientY the vertical coordinate of the client area of the mouse cursor relative to the window in which the event is located.
KeyCode, the Unicode code associated with the view being pressed.
OffsetX the horizontal coordinates of the mouse cursor relative to the object where the event is located.
OffsetY the vertical coordinate of the mouse cursor relative to the object where the event is located.
ScreenX the horizontal coordinates of the mouse cursor relative to the user's screen.
ScreenY the vertical coordinates of the mouse cursor relative to the user's screen.
*********************
Screen.width get the horizontal resolution of the monitor
Screen.height get the vertical resolution of the monitor
********
A frameset establishes a relationship between frames in a collection.
Parent-to-child references
The parent window contains two or more frames, which means that the parent window contains an array of child frame objects. You can position a frame with an array statement or frame name, which can be set with the Name property in the <frame> tag. Each framework contains a document object, which is typically a container for the elements that the script uses. The references from the parent frame to the child frame are as follows:
[Window.] Frams[n]. Objfuncvarname
[Window.] Framename.objfuncvarname
A placeholder for ojbfuncvarname represents an object that needs to be accessed in another window or frame. The index value of the framework is determined by the order in which the <frame> tags appear in the frameset. You can ignore the window.
Child-to-parent reference
Typically the script is placed in the parent frame, which is used by multiple child frames or multiple documents of a frame as a script library. From the perspective of a child frame, the upper layer of it is called the parent layer. So the reference to the elements from the child frame to the parent layer is as follows:
Window.parent.ObjFuncVarName ()//Call the function in the parent frame.
When the parent window is at the top of the object hierarchy that is currently loaded into the browser, you can arbitrarily place him as the top window, such as:
Top. Objfuncvarname ()
When a Web page is displayed in a frameset in another Web site, using the top reference can cause an error because the top window is not the top window of the main frameset at this time.
Child-to-child references
Any window or frame has the parent property, and the reference must use the Parent property to jump out of the current frame and go to the parent window of all child frames. Once this reference goes to the parent frame level, the reference can go on, just as it would be on the parent frame. From one sub-frame to another, the following format is used:
Window.parent.frames[n]. Objfuncvarname ()//Call a function in the sibling frame
Window.parent.frameName.ObjFuncVarName ()
****************************************
About page refreshes and IFRAME refreshes
1. Refresh Window.location.reload () on the page;
2.iframe Refresh
<iframe src= "1.htm" name= "Ifrmname" id= "Ifrmid" ></iframe>
Scenario One: Use the Name property of the IFRAME to locate
<input type= "button" name= "button" value= "button"
onclick= "window.frames[' Ifrmname '].location.reload ()" >
Scenario two: Locating with an IFRAME id attribute
<input type= "button" name= "button" value= "button"
Onclick= "Ifrmid.window.location.reload ()" >
The ultimate solution: When the src of the IFRAME is a different website address (cross-domain operation)
<input type= "button" name= "button" value= "button"
onclick= "window.open (document.all.ifrmname.src, ' ifrmname ', ')" >
6 frames, documents, and Windows
