jquery get element of parent window

May 19 posted in Web (RSS), comments.
Advertisements
$("#  Elements of the parent window  ID",window.parent.document);
  Javascript version of the corresponding  window.parent.document.getElementByIdx_x("  Elements of the parent window  ID"):

 

  Method of taking the elements of the parent window  :$(selector, window.parent.document);
  Then you take the parent element of parent window can use  :$(selector, window.parent.parent.document);

  Similarly, take much the same way other windows  
$(selector, window.top.document);
$(selector, window.opener.document);
$(selector, window.top.frames[0].document);

 

--------------------------------------------------------------------------------------------------

  Create child window and parent window and child windows communication between  :

 

1.Javascript  Pop-up child window  

  Can be achieved through a variety of ways, here are several ways to  

(1)   Object through the window  open()  Methods  ,open()  Method will generate a new window object window  

  Its use as  :
window.open(URL,windowName,parameters);

URL:   Description of the window to open URL address  ,  How not to open any page is empty  :

windowName:  Describe the open windows of the people said, you can use  '_top'.'_blank'  And other built-in name, the name here with the  <a href="..." target="...">  In the target attribute is the same  .

parameters:  Describe the open windows of the parameter values, or the appearance of  ,  It includes the value of individual properties window, and the values of the parameters to be passed  .

  For example,  :

  Open a 400 x 100 window clean  :
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

  Can also write  : var newWindow = open('','_blank');

  Parameters as follows  :

top=#   The top of the window at the top of the number of pixels off the screen  
left=#   The left side of the window left the number of pixels off the screen  
width=#   The width of the window  
height=#   The height of the window  
menubar=...   Window has no menu, value  yes  Or  no
toolbar=...   Window has no toolbar, value  yes  Or  no
location=...   Window with no address bar, the value  yes  Or  no
directories=...   Window has no connection area, the value  yes  Or  no
scrollbars=...   Window has no scroll bars, values  yes  Or  no
status=...   Window has no status bar, value  yes  Or  no
resizable=...   Not to adjust the window to the size, value  yes  Or  no


(2)   In addition to the javascript in the  open()  Methods outside the window object implements the pop-up window  ,  You can also create pop-up dialog box, the way  .
  If  :
alert(""); //  Prompt dialog box pop-up message  
confirm(""); //  Confirmation dialog box pop-up message  
prompt(""); //  Interactive nature of the dialog box  

  However, the implementation of the function of the more pop-up window with a single  ,  Can only be done relatively simple functions. Displayed in the dialog box for the needs of multiple data  ,

  And even HTML controls on the powerless  .

(3)   Modal dialog using the dialog box that demand complex  
  The built-in method in javascript there is a class method can be achieved through the dialog box is displayed  HTML  Content  ,
  That way you can create a dialog window to finish creating the function object can be completed  .
  Including the creation of modal dialog boxes and two non-modal dialog  .

  Implementation of the  :

//  You create a modal dialog box  
window.showModalDialog(sURL,vArguments,sFeatures)


//  Create a non-modal dialog  
window.showModelessDialog(sURL,vArguments,sFeatures)

  The difference is  :

  With  showModelessDialog()  Open the window, no need to use  window.close()  To close it, when a non-modal approach [  IE5  ] Open, open the dialog box  

  The window can still perform other operations, that dialog is not always the focus of the top  ,  URL to open the window when it changes  ,  It automatically shut down. The mode [  IE4  ] Means there is always the focus of the dialog box  (  The focus is not removed until it closed  ).  Modal dialog window and open it linked, so when we open another window  ,  The link between them is still preserved, and hidden in the active window of the following  . showModeDialog()  Is not the case  .

  Parameter Description  :

sURL:  Required parameters, type  :  String  .

  Used to specify the document to display the dialog box  URL.

vArguments:  Optional parameters, type  :  Variant  .

  Used to pass parameters to the dialog box. Passed parameter types not limited to  ,  Including the array and so on. Dialog box by  window.dialogArguments  To get the parameters passed in  .

sFeatures:  Selection parameters, type  :  String  .

  Used to describe the appearance of the dialog box and other information, you can use one or more of the following  ,  Semicolon  ";"  Separate  .

dialogHeight:  Height of the dialog box  

  Not less than 100px, IE4 in  dialogHeight  And dialogWidth default unit is  em,  The IE5 is  px,  For the convenience of its opinion, in the definition  modal  When the dialog box method, using  px  Units do  .
  
dialogWidth:   The width of the dialog box  .
 
dialogLeft:   The distance from the left table  .
  
dialogTop:   Distance away from the desktop  .
 
center:   Window is centered  

  By default yes, but you can specify the height and width  ,  Range  {yes | no | 1 | 0 }.
  
help:   Whether to display the Help button 

  By default yes, the range   {yes | no | 1 | 0 }.

 resizable:   Can be resized  .

  Default no, the range   {yes | no | 1 | 0 }   [IE5 +]  .

 status:   Whether to display the status bar  .

  The default is  yes[ Modeless]  Or  no[Modal],

  Range  {yes | no | 1 | 0 }   [IE5 +]  .

scroll:  Specify whether to display the dialog box scroll bar  .

  The default is yes, the range  { yes | no | 1 | 0 | on | off }.

  There are also several property is used in the HTA in the  ,  Pages in general do not use general  .

dialogHide:  In print or print preview dialog box is hidden  .

  The default is no, the range  { yes | no | 1 | 0 | on | off }.

edge:  Specified in the dialog box border style  .

  The default is raised, the range  { sunken | raised }.

unadorned:  The default is no, the range  { yes | no | 1 | 0 | on | off }.

  Incoming parameters  :

  To pass parameters dialog box, through  vArguments  For delivery. Type is not restricted  ,  For string types, maximum  4096  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();

  With the use of  window.open()  Method to create the window than the window modal method to create the difference lies in the window modal method to create the parent window will not operate  .


2.  Child window and parent window communication  

(1)   Use  window.open()  Create the window and parent window communication  
  Page in the child window to get the parent window through the window.opener object  ,  After the child windows can access the parent window to perform refresh operation by value, etc.  .
  If  :
window.opener.location.reload(); //  Child window refresh parent window  
window.opener.location.href //  Get the parent window  href
window.opener.locaiton.pathname //  Get path name of the parent window  

//  Refresh parent page  
window.location.href=window.location.href ; //  Reposition the parent page  
window.location.reload;


(2)   Modal communication window and parent window  
  Through the use of  showModelDialog(),  And showModelessDialog()  Method to create the child window to parent window communication, can not  window.opener

  To get the parent window object. To achieve communication  ,  Must create a modal child window parent window passed to the child window object  .

  Way to achieve  :

  In the parent window  :

var newWin=window.showModelDialog(url,window,'');
newWin.open();

  At this time parameter is the parent window object window  

  In the sub-window  :

  Must first obtain the parent window object, and then to use the parent window object  .  As the parent window object is created  
  Sub-window mode by passing parameters passed, so  ,  In the sub-window, it is only the way by getting the window parameters for parent window object. Access is as follows  

:

var parent=widnow.dialogArguments:
  Variable parent is the parent window object  .

  For example,  :

//  Submitted by the parent window a child window form  :form1,  After the implementation of queries submitted  
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();

//  Refresh parent page  
var parent=window.dialogArguments;
parent.location.reload();

//  Return value from child window to parent window  
  To achieve the modal child window Passing values to parent window, you need to use  window.returnValue  Complete  

  Implementation of the following  :

  In the sub-window  :

//  Get the parent window of a field value, plus a return on the value of the parent window  
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  :

//  Get the value from child window  
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
document.getElementByIdx_x("age").value=newWin;

//  Parent in the child window to set the value of the window  
 In the child window to parent window does not appear to directly set the incoming values in the value of the parent window is more clear. Directly set the value of the elements in the parent window seems to be more flexible  ,  But which method should be based on the specific circumstances and depending on the existing implementations, because if you use the methods not only reduce the development of practical efficiency  ,  Also reduced the efficiency, often also causes an elegant way to achieve and code style  .

  Child window to set the value of the parent window use the following  :

  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;
Quoted from: http://www.360doc.com/content/11/0418/10/2371584_110458156.shtml