Parsing jquery Gets the elements of the parent window

Source: Internet
Author: User

(#父窗口元素ID, window.parent.document), corresponding JavaScript version to window.parent.document.getElementByIdx_x ("Parent window Element ID");

takes the element method of the parent window: $ (selector, window.parent.document);
then you can take the element of the parent window of the parent window to use: $ (selector, window.parent.parent.document);
Similar, the method of fetching other Windows is the same
$ (selector, window.top.document);
$ (selector, window.opener.document);
$ (Selector, Window.top.frames[0].document);

-----------------------------------------------------------------------------
child window creation and communication between the parent window and the child window: The

1, javascript popup window
can be implemented in several ways, as described in the following ways
(1) With the open () method of the Window object, the open () method will produce a new Window window object
Its usage is:
window.open (url,windowname,parameters);
URL: Describes the URL of the window to open, and how to empty it without opening any web pages;
Windowname: Describes the open window of the people said, you can use the ' _top ', ' _blank ' and other built-in names, where the name and <a href= "..." Target= "..." the target attribute in > is the same.
Parameters: Describes the parameter value, or appearance, of the window being opened, including the values of each property of the window, and the parameter values to pass in.
For example:
opens 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 parameter description is as follows:
the number of pixels off the top of the screen at the top of the top=# window
left=# window left the number of pixels leaving the left side of the screen
Width of the width=# window
Height of the height=# window
Menubar= ... Window has no menu, value Yes or no
Toolbar= ... Window has 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 scroll bar, value Yes or no
Status= ... Window has status bar, value Yes or no
Resizable= ... window is not resized, value yes or no

(2) in JavaScript, in addition to the open () method to create a Window object implementation pop-up, you can create a dialog box pop-up window.
Such as:
alert (""); Pop-up Message prompt dialog box
Confirm (""); Pop-up Message Confirmation dialog box
Prompt (""); dialog box with an interactive nature
However, the above implementation of the pop-up window has a single function, can only complete a relatively simple function. For the need to display multiple data information in a dialog box,
Even HTML controls are powerless.

(3) using modal dialogs to implement complex dialog box requirements
There is also a way in which JavaScript's built-in methods can be used to display HTML content through a dialog box,
That is, you can do what you can to create a window object by creating a dialog box.
This includes creating modal dialog boxes and modeless dialog boxes.

The implementation method is:
//Create modal you dialog box
window.showModalDialog (Surl,varguments,sfeatures)
To create a modeless dialog box
Window.showmodelessdialog (Surl,varguments,sfeatures)

The difference between

is that
when you open a window with showModelessDialog (), you do not have to use Window.close () to close it, and when you open it in modeless mode [IE5], open the dialog box
The window can still do other things, that is, the dialog box is not always the topmost focus, and it closes automatically when the URL of the window that opens it changes. The modal [IE4] mode dialog box always has the focus (the focus cannot be moved until it closes). The modal dialog box is associated with the window that opens it, so when we open another window, their link relationship is still saved and hidden underneath the active window. Showmodedialog () is not.

parameter Description:
surl: Required parameter, type: String. The
is used to specify the URL of the document to display in the dialog box.
varguments: Optional parameter, type: Variant. The
is used to pass parameters to the dialog box. The parameter types passed are not limited, including arrays, and so on. The dialog box is window.dialogarguments to get the parameters passed in.
Sfeatures: Select parameter, type: String.
to describe information such as the appearance of a dialog box, you can use one or more of the following, with a semicolon ";" Separated.
dialogheight: Dialog height
is not less than 100px,ie4 in dialogheight and dialogwidth the default unit is EM, and in IE5 is PX, in order to facilitate its see, in the Definition of modal dialog box, with PX units.
Dialogwidth: Dialog box width.
Dialogleft: The distance from the left side of the desktop.
Dialogtop: The distance from the desktop.
Center: Window is centered
default Yes, but you can still specify height and width, value range {yes | no | 1 | 0}.
Help: Whether or not to display the assistance button
Default Yes, value 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 to yes[Modeless] or no[modal],
Value range {Yes | no | 1 | 0} [ie5+].
Scroll: Indicates whether the dialog box displays scroll bars. The
default is yes, the value range {yes | no | 1 | 0 | on/off}. The
also has several properties that are used in an HTA and are generally not used in general Web pages.
Dialoghide: Dialog box is hidden when printing or printing preview. The
default is no, the value range {yes | no | 1 | 0 | on | off}.
Edge: Indicates the border style of the dialog box.
Default is raised, value range {Sunken | raised}.
Unadorned: Default is no, value range {yes | no | 1 | 0 | on | off }。

Incoming parameters:
to pass arguments to the dialog box is passed through varguments. Type is not restricted, for a string type, 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 a window created by the modal method.


2, child windows and the parent window communication between
(1) using window.open () to create a window to communicate with the parent window
can get the parent window object by Window.opener in the child window page, and then the child window can perform a refresh, value, etc. on the parent window.


such as:
window.opener.location.reload (); child window refreshes the parent window


Window.opener.location.href//Get parent window href


window.opener.locaiton.pathname//Get the parent window path name


//Refresh parent page


Window.location.href=window.location.href; Relocate the parent page


Window.location.reload;


(2) modal window communicates with parent window
A child window created by using Showmodeldialog () and the showModelessDialog () method cannot be passed through Window.opener when it wants to communicate with the parent window


to get the parent window object. To implement communication, you must pass in the parent window object to a child window when you create a modal child window.


Implementation mode is:


in the parent window:
var newwin=window.showmodeldialog (Url,window, ");
Newwin.open ();
Now the parameter window is the parent window object


in a child window:
must first get the parent window object before you can use the parent window object. Because the parent window object is creating the


A child window is passed in as an incoming parameter, so the parent window object can only be obtained in a child window by getting the window parameter. Get the following way:
var parent=widnow.dialogarguments;
Variable parent is the parent window object.


For example:
//To submit a form in the parent window through a child window: Form1, perform a query operation after submitting


var parent=window.dialogarguments;


parent.document.form1.action= "queryinfor.jsp";


Parent.submit ();


//Refresh parent page


var parent=window.dialogarguments;


parent.location.reload ();


//From child window to parent window


To implement a value passed to the parent window in a modal child window, you need to use Window.returnvalue to complete the


Implementation methods are as follows:
in the child window:
//Gets the value of a field in the parent window, adds one to the value, and returns the parent window


var parent=window.dialogarguments;


var X=parent.docuement.getelementbyid ("Age"). Value;


x=x+1;


//return 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 the child window


passing values to the parent window in a child window does not seem to be straightforward to set the values in the parent window. It is more flexible to set the value of the element directly in the parent window. However, the specific approach to use depends on the actual situation and the existing implementation, because if the use of unrealistic methods not only reduce development efficiency, but also reduce the efficiency of execution, often resulting in an elegant way of implementation and code style.


child window Set the value of the parent window using the following method:


in 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;


above are some of the methods and data that I collect and accumulate when I use JavaScript in my project to solve child window problems. I do this by using a modal window (which is mostly related to the project itself), but in fact there are significant differences in implementation, whether using window.open () or using Window.showmodeldialog () for parameters, First contact will feel a bit messy, but as long as the relationship between the child window and the parent window and the role, it is very good to understand.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.