jquery get element of parent window

$("#  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  :

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  :

  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

//  Create a non-modal dialog

  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');


  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

(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,'');

  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;

//  Refresh parent page
var parent=window.dialogArguments;

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

//  Returns the x value

  In the parent window  :

//  Get the value from child window
var newWin=window.showModelDialog(url,window,'');

//  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;
//  Set the age property value in the parent window

Quoted from: http://www.360doc.com/content/11/0418/10/2371584_110458156.shtml

分类:Web 时间:2011-05-19 人气:316
blog comments powered by Disqus


  • On the js in the window.location.href, location.href, parent.location.href, top.location.href of use 2010-12-30

    On the js in the "window.location.href", "location.href", "parent.location.href", "top.location.href" usage "Window.location.href", "location.href" is the jump page "Parent.location.href&quo

  • 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别 2014-12-16

    关于js中window.location.href,location.href,parent.location.href,top.location.href的用法 "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转 举例说明: 如果A,B,C,D都是jsp,D是C的ifr

  • 关于js中"window(parent)(top).location.href"的用法 2013-05-21

    window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转 举例说明: 1.如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写 A; <htmll><iframe src="B.jsp"&g

  • JS to get the page's URL top.location.href and window.location.href 2009-05-11

    JS to get the page URL: (1) The common format is: window.location.href (2), but if you are logged on when the first pop-up a dialog, this dialog box, which is the login page login.jsp, this time in this dialog box if you want to get inside the outerm

  • JS in window.parent. Window.top.window.self the meaning of the 2010-12-27

    Application of a frameset or iframe in the page, parent is the parent window, top is the top parent window (some windows in the sets of several layers of frameset or iframe), self is the current window, opener is open method to open the current windo

  • (window,parent,opener,top).location.reload方法汇总 2014-10-09

    最近项目是和某度合作,集成他们一个功能到我们产品上.由于是中途从同事手中接过来的活,并且第一次使用jsonp,不熟悉页面的刷新跳转,遭坑惨了,现在来记录下这个情况,希望给有类似需求的同志带来些许帮助. 情景描述: 登陆login.html页面登陆验证成功后,跳转到index.html页面,index.html页面加载完成后就要发送jsonp请求到对方服务器得到想应的数据并展示出来,如若没有登陆某度的帐户,弹出提示信息.然后需要点击页面的登陆按钮,弹出某度的登陆框(iframe引入),登陆某度成功

  • top.location.href 没有权限 解决方法 2014-11-19

    以前好像没有遇到这问题,也可能是没有在意吧,我的blog内容页都是有判断的,规则是,如果top.location不是内容页的话就跳到内容页 这样一样,如果有人把我的网页保存后,或者用iframe包含进去,再打开的话就会直接跳到我的文章页,以前测试成功,今天看到有个网站把我的页面给包含了,我想我的首页被iframe也没什么呀,可是点内页后,发现没有进入我的网站,查看javascript错误提示发现提示"无权访问",在本地测试后发现问题依旧,看来是不对方网站做什么设置了,而是我网站问题,一

  • 获取当前网页document.url location.href区别总结 2014-05-09

    请教:document.URL和window.location.href区别 JAVASCRIPT?嗤?改系谒陌嫔险f,????有?^?e. ?⒁? document.URL 章?. [document.URL是???的文?nURL,而window.location.href是真??的文?nURL 搞不明白. 服务器重定向后有可能使document.url变动,但window.location.href指的永远是访问该网页时用的URL. document.url只能作为只读字符串

  • QQ邮箱的一个文本编辑器代码 2013-10-04

    edt_color_slt.js var _r = ""; var color_table=[ ['000000','993300','333300','003300','003366','000080','333399','333333'], ['800000','FF6600','808000','008000','008080','0000FF','666699','808080'], ['FF0000','FF9900','99CC00','339966','33CCCC','

  • url encoding problem passing a connection 2010-12-05

    <a href="#"> test <a> link for this place to be if the character encoding used, Nested in the frame to use in the js call to the parent element. parent.document. When the style sheet when the label is best not to write separately, to

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.066 (s). 12 q(s)