javascript

位置:IT落伍者 >> javascript >> 浏览文章

解析jquery获取父窗口的元素


发布日期:2020年08月20日
 
解析jquery获取父窗口的元素

("#父窗口元素ID"windowparentdocument); 对应javascript版本为windowparentdocumentgetElementByIdx_x("父窗口元素ID")

取父窗口的元素方法$(selector windowparentdocument);
那么你取父窗口的父窗口的元素就可以用$(selector windowparentparentdocument);
类似的取其它窗口的方法大同小异
$(selector windowtopdocument);
$(selector windowopenerdocument);
$(selector windowtopframes[]document);


子窗口创建及父窗口与子窗口之间通信

Javascript弹出子窗口
可以通过多种方式实现下面介绍几种方法
() 通过window对象的open()方法open()方法将会产生一个新的window窗口对象
其用法为
windowopen(URLwindowNameparameters);
URL: 描述要打开的窗口的URL地址如何为空则不打开任何网页
windowName:描述被打开的窗口的民称可以使用_top_blank等内建名称这里的名称跟<a href="" target="">里的target属性是一样的
parameters:描述被打开的窗口的参数值或者说是样貌其包括窗口的各个属性值及要传入的参数值
例如
打开一个 x 的干净的窗口
open(_blankwidth=height=menubar=notoolbar=no
location=nodirectories=nostatus=noscrollbars=yesresizable=yes)
也可以这样写 var newWindow = open(_blank);

参数说明如下
top=# 窗口顶部离开屏幕顶部的像素数
left=# 窗口左端离开屏幕左端的像素数
width=# 窗口的宽度
height=# 窗口的高度
menubar= 窗口有没有菜单取值yes或no
toolbar= 窗口有没有工具条取值yes或no
location= 窗口有没有地址栏取值yes或no
directories= 窗口有没有连接区取值yes或no
scrollbars= 窗口有没有滚动条取值yes或no
status= 窗口有没有状态栏取值yes或no
resizable= 窗口给不给调整大小取值yes或no

() 在javascript中除了通过open()方法建立window对象实现弹出窗口外还可以通过建立对话框的方式弹出窗口

alert(""); //弹出信息提示对话框
confirm(""); //弹出信息确认对话框
prompt(""); //具有交互性质的对话框
但是上述实现的弹出窗口具有的功能较为单一只能完成较为简单的功能对于需要在对话框中显示多个数据信息
甚至是HTML控件就无能为力了

() 使用模态对话框实现复杂的对话框需求
在javascript的内建方法中还有一类方法可以实现通过对话框显示HTML内容
也就是说可以通过创建对话框的方式来完成创建窗口对象所能完成的功能
包括创建模态对话框和非模态对话框两种

实现方法为
//创建模态你对话框
windowshowModalDialog(sURLvArgumentssFeatures)
//创建非模态对话框
windowshowModelessDialog(sURLvArgumentssFeatures)

其区别在于
用showModelessDialog()打开窗口时不必用windowclose()去关闭它当以非模态方式[IE]打开时 打开对话框
的 窗口仍可以进行其他的操作即对话框不总是最上面的焦点当打开它的窗口URL改变时它自动关闭而模态[IE]方式的对话框始终有焦点(焦点不可移 走直到它关闭)模态对话框和打开它的窗口相联系因此我们打开另外的窗口时他们的链接关系依然保存并且隐藏在活动窗口的下面  showModeDialog()则不然

参数说明
sURL必选参数类型字符串
用来指定对话框要显示的文档的URL
vArguments可选参数类型变体
用来向对话框传递参数传递的参数类型不限包括数组等对话框通过windowdialogArguments来取得传递进来的参数
sFeatures选参数类型字符串
用来描述对话框的外观等信息可以使用以下的一个或几个用分号“;”隔开
dialogHeight对话框高度
不小于pxIE中dialogHeight和dialogWidth 默认的单位是em而IE中是px为方便其见在定义modal方式的对话框时用px做单位
dialogWidth: 对话框宽度
dialogLeft: 距离桌面左的距离
dialogTop: 离桌面上的距离
center: 窗口是否居中
默认yes但仍可以指定高度和宽度取值范围{yes | no | | }
help: 是否显示帮助按钮
默认yes取值范围 {yes | no | | }
resizable: 是否可被改变大小
默认no取值范围 {yes | no | | } [IE+]
status: 是否显示状态栏
默认为yes[ Modeless]或no[Modal]
取值范围{yes | no | | } [IE+]
scroll:指明对话框是否显示滚动条
默认为yes取值范围{ yes | no | | | on | off }
还有几个属性是用在HTA中的在一般的网页中一般不使用
dialogHide:在打印或者打印预览时对话框是否隐藏
默认为no取值范围{ yes | no | | | on | off }
edge:指明对话框的边框样式
默认为raised取值范围{ sunken | raised }
unadorned:默认为no取值范围{ yes | no | | | on | off }

传入参数
要想对话框传递参数是通过vArguments来进行传递的类型不限制对于字符串类型最大为个字符也可以传递对象
例如
var newWin=windowshowModalDialog(urlwindowdialogHeight:px dialogLeft:px dialogTop:px
dialogWidth:px status: edge:sunken);
newWinopen();
与使用windowopen()方法创建窗口相比模态方法创建窗口的区别在于有模态方法创建的窗口后将不能操作父窗口
子窗口与父窗口间通信
() 使用windowopen()创建的窗口与父窗口通信
可以在子窗口页面中通过windowopener来获取父窗口对象获取之后子窗口便可以对父窗口执行刷新传值等操作

windowopenerlocationreload(); //子窗口刷新父窗口
windowopenerlocationhref //获取父窗口href
windowopenerlocaitonpathname //获取父窗口路径名
//刷新父页面
windowlocationhref=windowlocationhref ; //重新定位父页面
windowlocationreload;
() 模态窗口与父窗口通信
通过使用showModelDialog()及showModelessDialog()方法创建的子窗口想与父窗口通信时不能通过windowopener
来获取父窗口对象要实现通信必须在创建模态子窗口时向子窗口传入父窗口对象
实现方式为
在父窗口中
var newWin=windowshowModelDialog(urlwindow);
newWinopen();
此时参数window即是父窗口对象
在子窗口中
需首先获取父窗口对象然后才能使用父窗口对象由于父窗口对象是在创建
子窗口时通过传入参数的方式传入的因此在子窗口中也只能通过获取窗口参数的方式获取父窗口对象获取方式如下
var parent=widnowdialogArguments
变量parent便是父窗口对象
例如
//通过子窗口提交父窗口中的表单form提交后执行查询操作
var parent=windowdialogArguments;
parentdocumentformaction="QueryInforjsp";
parentsubmit();
//刷新父页面
var parent=windowdialogArguments;
parentlocationreload();
//从子窗口传值到父窗口
要实现在模态子窗口中传值到父窗口需要使用windowreturnValue完成
实现方法如下
在子窗口中
//获取父窗口某字段值对该值加一后返回父窗口
var parent=windowdialogArguments;
var x=parentdocuementgetElementById("age")value;
x=x+
//传回x值
windowreturnValue=x;
在父窗口中
//获取来自子窗口的值
var newWin=windowshowModelDialog(urlwindow);
if(newWin!=null)
documentgetElementByIdx_x("age")value=newWin;
//在子窗口中设置父窗口的值
在 子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了直接设置父窗口中元素的值显得要更灵活一些不过具体使用哪种方法要根据实际情况和已有 的实现方式而定因为如果使用了不切实际的方法不仅降低开发效率也降低了执行效率往往也会造成不优雅的实现方式和代码风格
子窗口设置父窗口的值使用方法如下
子窗口中
var parent=windowdialogArguments;
var x=parentdocumentgetElementByIdx_x("age")value;
x=x+
//设置父窗口中age属性值
parentdocumentgetElementByIdx_x("age")value=x;
以 上是我在项目中使用javascript解决子窗口问题时收集及积累的一些方法和资料我是使用建立模态窗口的方式来实现的(这主要与项目本身有关) 不过其实不论是使用windowopen()还是使用windowshowModelDialog()进行传参等操作时虽然在实现方法上有很大的差 别初次接触会觉得有点乱但只要理清子窗口与父窗口之间的关系和角色之后就很好理解了

               

上一篇:JavaScript获取和设置CheckBox状态的简单方法

下一篇:JS自动适应的图片弹窗实例