("#父窗口元素ID", window.parent.document); The corresponding JavaScript version is window.parent.document.getElementByIdx_x ("Parent window Element ID");
The element method to take the parent window: $ (selector, window.parent.document);
Then you take the parent window of the element can be used: $ (selector, window.parent.parent.document);
Similarly, the method of taking other windows is similar
$ (selector, window.top.document);
$ (selector, window.opener.document);
$ (selector, window.top.frames[0].document);
-----------------------------------------------------------------------------
child window creation and communication between parent window and child window:
1. JavaScript Popup child window
Can be implemented in a number of ways, as described below
(1) by the Open () method of the Window object, the open () method will produce a new Window object
The usage is:
window.open (url,windowname,parameters);
URL: Describes the URL of the window to be opened, how to empty it does not open any Web page;
Windowname: Description of the open window of the people said, you can use the ' _top ', ' _blank ' and other built-in name, here the name of <a href= "..." "target=" ... "the target property in > is the same.
Parameters: Describes the parameter value of the window being opened, or the appearance, which includes the values of each property of the window and the parameter values to pass in.
For example:
Open a clean window of x 100:
Open (' ', ' _blank ', ' width=400,height=100,menubar=no,toolbar=no,
Location=no,directories=no,status=no,scrollbars=yes,resizable=yes ')
You can also write this: var newwindow = open (', ' _blank ');
The parameters are described as follows:
top=# the number of pixels from the top of the screen at the top of the window
left=# the number of pixels left of the screen at the left end of the window
width=# width of window
height=# Height of window
Menubar= ... Window has no menu, value Yes or no
Toolbar= ... window has no toolbar, value Yes or no
Location= ... window has no address bar, value yes or no
Directories= ... window has no connection area, value Yes or no
Scrollbars= ... Window has no scroll bar, value Yes or no
Status= ... window has no status bar, value Yes or no
Resizable= ... The window is not given the resizing, the value is yes or no
(2) in JavaScript, in addition to the open () method to create a window object to implement a pop-up window, you can also create a dialog box to pop-up window.
Such as:
Alert (""); Pop-up Message prompt dialog box
Confirm (""); Popup Information Confirmation dialog box
Prompt (""); dialog box with interactive properties
However, the above implementation of the pop-up window has a relatively simple function, can only complete the simpler function. For multiple data information to be displayed in the dialog box,
Even HTML controls are powerless.
(3) Use modal dialogs to implement complex dialog box requirements
In JavaScript's built-in approach, there is also a way to display HTML content through a dialog box.
This means that you can create a dialog box to complete the functions that you can do to create a Window object.
This includes creating modal dialogs and non-modal dialog boxes.
The implementation method is:
Create modal you dialog box
window.showModalDialog (Surl,varguments,sfeatures)
To create a non-modal dialog box
Window.showmodelessdialog (Surl,varguments,sfeatures)
The difference between the
is that
opens a window with showModelessDialog () without having to close it with Window.close () and opens the dialog box when open in non-modal mode [IE5]
The window can still do other things, that is, the dialog box is not always the topmost focus, and it automatically closes when the URL of the window that opens it changes. The modal [IE4] mode dialog box always has focus (the focus cannot be moved until it is closed). The modal dialog box is associated with the window that opens it, so when we open the other window, their link relationship is still saved and hidden beneath the active window. Showmodedialog () is not.
parameter Description:
surl: Required parameter, type: String. The
is used to specify the URL of the document to be displayed by the dialog box.
varguments: Optional parameter, type: Variant. The
is used to pass parameters to the dialog box. There are no limits on the types of arguments passed, including arrays. The dialog box uses window.dialogarguments to get the arguments passed in.
Sfeatures: Optional parameter, type: String.
used to describe the appearance of the dialog box, such as information, you can use the following one or several, with a semicolon ";" Separated.
dialogheight: Dialog height
is not less than 100px,ie4 dialogheight and dialogwidth The default unit is EM, and IE5 is PX, in order to facilitate its see, in the definition of modal Mode dialog box, use PX to do the unit.
Dialogwidth: The width of the dialog box.
Dialogleft: The distance from the desktop to the left.
Dialogtop: The distance from the desktop.
Center: Window is centered
default Yes, but can still specify height and width, range {yes | no | 1 | 0}.
Help: Whether to display the Assist button
Default Yes, range {yes | no | 1 | 0}.
Resizable: Whether the size can be changed.
Default No, value range {yes | no | 1 | 0} [ie5+].
Status: Whether the status bar is displayed.
Default is yes[Modeless] or no[modal],
Value range {Yes | no | 1 | 0} [ie5+].
Scroll: Indicates whether the dialog box displays scroll bars.
Default is yes, value range {yes | no | 1 | 0 | on | off}. The
also has several properties that are used in HTA and are not generally used in general Web pages.
Dialoghide: Whether the dialog box is hidden when printing or printing preview.
Default is no, value range {yes | no | 1 | 0 | on | off}.
Edge: Indicates the border style of the dialog box. The
default is raised, and the value range {Sunken | raised}.
Unadorned: Default is no, value range {yes | no | 1 | 0 | on | off}.
Incoming parameters:
To pass a parameter to a dialog box, it is passed by Varguments. Type is not limited, for string types, the maximum is 4,096 characters. You can also pass objects
For example:
var newwin=window.showmodaldialog (Url,window, ' dialogheight:500px, dialogleft:100px, dialogtop:100px,
dialogwidth:300px, status:0, Edge:sunken ');
Newwin.open ();
Compared to creating a window using the window.open () method, the modal method creates a window that is not able to manipulate the parent window after the window created by the modal method.
2. Communication between child window and parent window
(1) Use the window created by window.open () to communicate with the parent window
The parent window object can be obtained through window.opener in the child window page, and the child window can then perform a refresh, pass the value, and so on to the parent window.
such as:
Window.opener.location.reload (); child window refreshes parent window
Window.opener.location.href//Get parent window href
Window.opener.locaiton.pathname//Get parent window path name
Refresh Parent Page
Window.location.href=window.location.href; Reposition Parent Page
Window.location.reload;
(2) modal window communicates with parent window
A child window created by using Showmodeldialog (), and the showModelessDialog () method cannot communicate with the parent window by Window.opener
To get the parent window object. To implement communication, you must pass in the parent window object to the child window when you create the modal child window.
The implementation is as follows:
in the parent window:
var newwin=window.showmodeldialog (Url,window, ");
Newwin.open ();
The parameter window is the parent window object at this time
in the child window:
You need to get the parent window object first before you can use the parent window object. Because the parent window object is created in the
A child window is passed in by passing in a parameter, so the parent window object can be obtained only by getting the window parameter in the child window.here's how to get it:
var parent=widnow.dialogarguments;
The parent of the variable is the parents window object.
For example:
Submit form in parent window via child window: Form1, execute query after commit
var parent=window.dialogarguments;
Parent.document.form1.action= "queryinfor.jsp";
Parent.submit ();
Refresh Parent Page
var parent=window.dialogarguments;
Parent.location.reload ();
Passing a value from a child window to a parent window
To implement the transfer of values to the parent window in a modal subwindow, you need to use Window.returnvalue to complete
The implementation method is as follows:
In the child window:
Gets the value of a field in the parent window that is added one after the parent window is returned
var parent=window.dialogarguments;
var X=parent.docuement.getelementbyid ("Age"). Value;
x=x+1;
Returns the X value
Window.returnvalue=x;
in the parent window:
Gets the value from the child window
var newwin=window.showmodeldialog (Url,window, ");
if (newwin!=null)
Document.getelementbyidx_x ("Age"). Value=newwin;
Set the value of the parent window in a child window
Passing in a value in a child window to the parent window does not seem to be straightforward to set the value in the parent window. It is more flexible to set the values of the elements in the parent window directly, but the use of which method depends on the actual situation and the existing implementation method, because if the use of unrealistic methods not only reduce development efficiency, but also reduce the efficiency of execution, often also create an elegant implementation style and code style.
The child window sets the value of the parent window using the following method:
in the child window:
var parent=window.dialogarguments;
var x=parent.document.getelementbyidx_x ("Age"). Value;
x=x+1;
Set the Age property value in the parent window
Parent.document.getElementByIdx_x ("Age"). Value=x;
These are some of the methods and materials that I collect and accumulate when I use JavaScript in my project to solve sub-window problems. I do this in the form of a modal window (which is primarily related to the project itself), although there is a significant difference in implementation, whether using window.open () or using Window.showmodeldialog () for reference, The initial contact will be a bit messy, but it's good to understand the relationship and role between the child window and the parent window.