$("#parent window element ID",);
The corresponding javascript version is .getElementByIdx_x("parent window element ID");
Method of taking element of the parent window: $(selector, );
Then you can use the element of the parent window of the parent window: $(selector, );
Similarly, the method of taking other windows is similar
$(selector, );
$(selector, );
$(selector, [0].document);
--------------------------------------------------------------------------------------------------
Children window creation and communication between parent window and child window:
1. Javascript pop-up sub-window
It can be implemented in many ways, and the following are several methods
(1) Through the open() method of the window object, the open() method will generate a new window window object
Its usage is:
(URL,windowName,parameters);
URL: Describes the URL address of the window to be opened, and does not open any web page if it is empty;
windowName: Describe the name of the open window. You can use built-in names such as '_top' and '_blank'. The name here is the same as the target attribute in <a href="..." target="...">.
parameters: describes the parameter value, or appearance of the opened window, which includes the various attribute values of the window and the parameter value to be passed in.
For example:
Open a clean 400 x 100 window:
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 way: var newWindow = open('','_blank');
The parameters are as follows:
top=# Number of pixels at the top of the window leaving the top of the screen
left=# The number of pixels on the left end of the window leaving the left end of the screen
width=# window width
height=# The height of the window
menubar=... Does the window have a menu, value yes or no
toolbar=... Does the window have a toolbar, take the value yes or no
location=... Does the window have an address bar, value yes or no
directories=... Is there a connection area in the window, and the value yes or no
scrollbars=... Does the window have scrollbars, take the value yes or no
status=... Does the window have a status bar, and the value yes or no
resizable=... window is not resized, the value yes or no
(2) In JavaScript, in addition to creating a window object through the open() method to implement pop-up window, you can also pop-up windows by creating a dialog box.
like:
alert(""); //The message prompt dialog box pops up
confirm(""); //The message confirmation dialog box pops up
prompt(""); //Dialog box with interactive properties
However, the pop-up window implemented above has relatively single functions and can only complete simpler functions. For multiple data information that needs to be displayed in the dialog box,
Even HTML controls can do nothing.
(3) Use modal dialog boxes to achieve complex dialog requirements
Among the built-in methods of javascript, there is also a type of method that can display HTML content through dialog boxes.
In other words, the functions that can be completed by creating a window object can be completed by creating a dialog box.
It includes two types: creating modal dialog boxes and non-modal dialog boxes.
The implementation method is:
//Create a modal dialog box
(sURL,vArguments,sFeatures)
//Create a non-modal dialog
(sURL,vArguments,sFeatures)
The difference is:
When opening a window with showModelessDialog(), you do not need to use() to close it. When it is opened in a non-modal way [IE5], the dialog box is opened.
The window can still perform other operations, that is, the dialog box is not always the top focus, and it will automatically close when the URL of the window that opens it changes. The dialog box in the modal [IE4] mode always has a focus (the focus cannot be removed until it closes). The modal dialog box is related to the window that opens it, so when we open another window, their link relationship remains saved and is hidden below the active window. showModeDialog() is not the case.
Parameter description:
sURL: Required parameter, type: string.
Used to specify the URL of the document to be displayed in the dialog box.
vArguments: Optional parameter, type: variant.
Used to pass parameters to the dialog box. The passed parameter types are not limited, including arrays, etc. The dialog box obtains the passed parameters.
sFeatures: Select parameter, type: string.
Information used to describe the appearance of a dialog box, such as the following information, can be separated by a semicolon ";".
dialogHeight: dialog box height
Not less than 100px. The default units of dialogHeight and dialogWidth in IE4 are em, while in IE5 are px. For the sake of convenience, px is used as the unit when defining the dialog box in the modal method.
dialogWidth: dialog box width.
dialogLeft: The distance from the left of the desktop.
dialogTop: Distance from the desktop.
center: Is the window centered
Default yes, but you can still specify height and width, with a value range {yes | no | 1 | 0 }.
help: Whether to display the help button
The default yes is the value range {yes | no | 1 | 0 }.
resizable: Whether it can be changed in size.
Default no, value range {yes | no | 1 | 0 } [IE5+].
status: Whether to display the status bar.
Default is yes[Modeless] or no[Modal],
Value range {yes | no | 1 | 0 } [IE5+].
scroll: Indicates whether the dialog box displays scrollbars.
The default is yes, with the value range { yes | no | 1 | 0 | on | off }.
There are several other attributes that are used in HTA and are generally not used in general web pages.
dialogHide: Whether the dialog box is hidden when printing or printing preview.
The default is no, with the value range { yes | no | 1 | 0 | on | off }.
edge: Specify the border style of the dialog box.
The default is raised, with the value range { sunken | raised }.
unadorned: The default is no, with the value range { yes | no | 1 | 0 | on | off }.
Pass in parameters:
To pass parameters in the dialog box, it is passed through vArguments. There is no restriction on type, for string types, the maximum is 4096 characters. You can also pass objects
For example:
var newWin=(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,
dialogWidth:300px, status:0, edge:sunken');
();
Compared with using the() method to create windows, the difference between modal method creation windows is that the parent window cannot be operated after a window created by a modal method.
2. Communication between child window and parent window
(1) The window created with () communicates with the parent window
You can obtain the parent window object in the child window page. After obtaining, the child window can perform refreshing, passing values and other operations on the parent window.
like:
(); //The child window refreshes the parent window
//Get parent window href
//Get the parent window path name
//Refresh the parent page
= ; //Reposition the parent page
;
(2) Modal window communicates with parent window
When a child window created by using showModelDialog() and showModelessDialog() methods want to communicate with the parent window, it cannot be passed
to get the parent window object. To implement communication, you must pass the parent window object to the child window when creating a modal child window.
The implementation method is:
In the parent window:
var newWin=(url,window,'');
();
At this time, the parameter window is the parent window object
In the child window:
You need to get the parent window object first before you can use the parent window object. Since the parent window object is created
The child window is passed in by passing in parameters, so in the child window, the parent window object can only be obtained by obtaining window parameters. The acquisition method is as follows:
var parent=；
The variable parent is the parent window object.
For example:
//Submit the form in the parent window through the child window: form1, and perform the query operation after submitting
var parent=;
.="";
();
//Refresh the parent page
var parent=;
();
//Transfer value from child window to parent window
To implement the transfer of values to the parent window in a modal child window, use complete
The implementation method is as follows:
In the child window:
//Get the value of a field in the parent window, add one to the value and return to the parent window
var parent=;
var x=("age").value;
x=x+1；
//Transfer back x value
=x;
In the parent window:
//Get the value from the child window
var newWin=(url,window,'');
if(newWin!=null)
document.getElementByIdx_x("age").value=newWin;
//Set the value of the parent window in the child window
It seems that passing values into the parent window in the child window does not directly set the values in the parent window. It is more flexible to directly set the value of the element in the parent window, but the specific method to use depends on the actual situation and the existing implementation method, because if an unrealistic method is used, it not only reduces development efficiency, but also reduces execution efficiency, and often leads to inelegant implementation methods and code styles.
The child window sets the value of the parent window as follows:
In the sub-window:
var parent=;
var x=.getElementByIdx_x("age").value;
x=x+1；
//Set the value of the age attribute in the parent window
.getElementByIdx_x("age").value=x;
The above are some methods and information I collected and accumulated when using javascript to solve subwindow problems in my project. I implemented it using the method of establishing a modal window (this is mainly related to the project itself). However, although there are big differences in implementation methods when using () or using () for argument transfer, it will feel a bit messy when first contact is found, but as long as you sort out the relationship and role between the child window and the parent window, it will be easy to understand.