一、Javascript弹出子窗口:可以通过多种方式实现,下面介绍几种方法
1、通过window对象的open()方法,open()方法将会产生一个新的window窗口对象 //IE7里不支持
其用法为:
window.open(URL,windowName,parameters);
URL: 描述要打开的窗口的URL地址,如何为空则不打开任何网页;
windowName:描述被打开的窗口的民称,可以使用'_top'、'_blank'等内建名称,这里的名称跟<a href="..." target="...">里的target属性是一样的。
parameters:描述被打开的窗口的参数值,或者说是样貌,其包括窗口的各个属性值,及要传入的参数值。
例如:
打开一个 400 x 100 的干净的窗口:
open('','_blank','width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes')
参数说明如下:
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
2、在javascript中除了通过open()方法建立window对象实现弹出窗口外,还可以通过建立对话框的方式弹出窗口。
如:
alert(""); //弹出信息提示对话框
confirm(""); //弹出信息确认对话框
prompt(""); //具有交互性质的对话框
说名:
但是,上述实现的弹出窗口具有的功能较为单一,只能完成较为简单的功能。对于需要在对话框中显示多个数据信息,甚至是HTML控件就无能为力了。
3、使用模态对话框实现复杂的对话框需求
在javascript的内建方法中还有一类方法可以实现通过对话框显示HTML内容,也就是说可以通过创建对话框的方式来完成创建窗口对象所能完成的功能。包括创建模态对话框和非模态对话框两种。
实现方法为:
//创建模态你对话框
window.showModalDialog(sURL,vArguments,sFeatures)
//创建非模态对话框
window.showModelessDialog(sURL,vArguments,sFeatures)
其区别在于:
用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。 showModeDialog()则不然。
参数说明:
sURL:必选参数,类型:字符串,用来指定对话框要显示的文档的URL。
vArguments:可选参数,类型:变体,用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures:选参数,类型:字符串,用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogHeight:对话框高度,不小于100px,IE4中dialogHeight和dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 距离桌面左的距离。
dialogTop: 离桌面上的距离。
center: 窗口是否居中
默认yes,但仍可以指定高度和宽度,取值范围{yes | no | 1 | 0 }。
help: 是否显示帮助按钮
默认yes,取值范围 {yes | no | 1 | 0 }。
resizable: 是否可被改变大小。
默认no,取值范围 {yes | no | 1 | 0 } [IE5+]。
status: 是否显示状态栏。
默认为yes[ Modeless]或no[Modal],
取值范围{yes | no | 1 | 0 } [IE5+]。
scroll:指明对话框是否显示滚动条。
默认为yes,取值范围{ yes | no | 1 | 0 | on | off }。
还有几个属性是用在HTA中的,在一般的网页中一般不使用。
dialogHide:在打印或者打印预览时对话框是否隐藏。
默认为no,取值范围{ yes | no | 1 | 0 | on | off }。
edge:指明对话框的边框样式。
默认为raised,取值范围{ sunken | raised }。
unadorned:默认为no,取值范围{ yes | no | 1 | 0 | on | off }。
传入参数:
要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象
例如:
var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,
dialogWidth:300px, status:0, edge:sunken');
newWin.open();
与使用window.open()方法创建窗口相比,模态方法创建窗口的区别在于有模态方法创建的窗口后将不能操作父窗口.
二、子窗口与父窗口间通信
1、使用window.open()创建的窗口与父窗口通信可以在子窗口页面中通过window.opener来获取父窗口对象,获取之后子窗口便可以对父窗口执行刷新,传值等操作。
如:
window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //获取父窗口href
window.opener.locaiton.pathname //获取父窗口路径名
//刷新父页面
window.location.href=window.location.href ; //重新定位父页面
window.location.reload;
2、模态窗口与父窗口通信
通过使用showModelDialog(),及showModelessDialog()方法创建的子窗口想与父窗口通信时,不能通过window.opener来获取父窗口对象。要实现通信,必须在创建模态子窗口时向子窗口传入父窗口对象。
实现方式为,
在父窗口中:
var newWin=window.showModelDialog(url,window,'');
newWin.open();
此时参数window即是父窗口对象在子窗口中,需首先获取父窗口对象,然后才能使用父窗口对象。由于父窗口对象是在创建子窗口时通过传入参数的方式传入的,因此,在子窗口中也只能通过获取窗口参数的方式获取父窗口对象,获取方式如下:
var parent=widnow.dialogArguments;
变量parent便是父窗口对象。
例如:
//通过子窗口提交父窗口中的表单:form1,提交后执行查询操作
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();
//刷新父页面
var parent=window.dialogArguments;
parent.location.reload();
//从子窗口传值到父窗口
要实现在模态子窗口中传值到父窗口,需要使用window.returnValue完成实现方法如下:
在子窗口中:
//获取父窗口某字段值,对该值加一后返回父窗口
var parent=window.dialogArguments;
var x=parent.docuement.getElementById("age").value;
x=x+1;
//传回x值
window.returnValue=x;
在父窗口中:
//获取来自子窗口的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
document.getElementById("age").value=newWin;
//在子窗口中设置父窗口的值
在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些,不过具体使用哪种方法要根据实际情况和已有的实现方式而定,因为如果使用了不切实际的方法不仅降低开发效率,也降低了执行效率,往往也会造成不优雅的实现方式和代码风格。
子窗口设置父窗口的值使用方法如下:
子窗口中:
var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1;
//设置父窗口中age属性值
parent.document.getElementById("age").value=x;
三、补充:子窗体传值给父窗体可以通过函数传值
1.htm 父窗体代码
<script language="javascript" >
function toUrl() {
window.open("2.htm","_blank");
}
function getvalue(a) {
Form1.Text1.value=a;
}
</script>
<form id="form1">
<input id="text1" width=150px/>
<input id="button1" name="button1" onclick="toUrl()"/>
</form>
2.htm 子窗体
<script language="javascript" >
function goBack() {
window.opener.getvalue("123");
window.close();
}
</script>
<form id="form1">
<input id="button1" name="button1" onclick="goBack()"/>
</form>
子窗体父窗体之间传值通过摸态对话框,试验代码
1.htm 父窗体
<script language="javascript" >
function transVal() {
var newwin=window.showModalDialog("2.htm",window);
if(newwin!="[object]"){
document.getElementById("Text1").value=newwin;
}
}
</script>
<form id="form1">
<input id=text1 width=150px/>
<input type="button" id=button1 onclick="transVal()"/>
</form>
2.htm 子窗体
<script language="javascript" >
function reVal() {
var x="123";
window.returnValue=x;
window.close();
}
</script>
<form id="form1">
<input type="button" id=button1 onclick="reVal()"/>
</form>
- 浏览: 35789 次
- 性别:
- 来自: 深圳
最新评论
web弹出窗口大全
- 博客分类:
- J2EE
发表评论
-
hibernate在eclipse的逆向工程生成hbm.xml和bean类
2014-09-24 10:56 544以前一直用myelipse,在myeclipse做hiber ... -
Jackson 框架,轻易转换JSON
2014-06-19 16:22 395Jackson可以轻松的将Java对象转换成json对象和x ... -
Gson简要使用笔记
2014-03-17 11:57 462使用Gson进行解析:下载google-gson-2.2.2 ... -
org.apache.commons.net.ftp包开发FTP客户端,实现断点续传,中文支持
2014-01-06 20:36 378利用org.apache.commons.net.ftp包 ... -
Apache FtpServer与Spring整
2014-01-01 22:50 742首先在application.xml(spring配置文件 ... -
Struts2+Jquery实现ajax并返回json类型数据
2013-09-15 10:27 291摘要: 主要实现步骤如下: 1、JSP页面使用脚本代码执行 ... -
DIV样式居中
2013-07-02 10:10 771我相信所有的前端菜鸟在刚开始工作的时候都会和我一样,收到实 ... -
JSON
2013-06-19 10:40 455JSON是一种基于文本的数据交换方式,或者叫做数据描述格式, ... -
JSP页面显示天气
2013-06-18 11:39 583显示深圳当天天气: <iframe width=& ... -
jsp的九大内置对象和四大作用域
2013-06-15 17:55 285定义:可以不加声明就在JSP页面脚本(Java程序片和Ja ... -
js功能杂技
2013-06-15 17:37 448一、日期写法: Html代码 < ... -
js中window的属性
2013-06-15 17:35 301Window的属性 属性描述 closed 获取引 ... -
用window.open()打开子页面传值问题
2013-06-15 17:33 6971、通过window对象的open()方法,open()方法 ... -
kaptcha生成图形验证码实现方法
2013-06-14 09:15 8411、下载kaptcha。 http://cod ... -
tomcate配置
2013-06-13 09:56 649Tomcat 是一款优秀的JSP/Servlet容器,最初 ... -
SVN
2013-06-13 09:35 6721.下载subclipse1.6的site包 2.把这个 ... -
log4j 应用
2013-06-13 09:33 548LOG4J的配置之简单使它遍及于越来越多的应用中了:Log ... -
maven配置
2013-06-13 09:29 577一、maven环境变量配置 变量名:M2_ ... -
myEclipse配置
2013-06-13 09:28 590一、myeclipse不能自动提示解决不能自动提示解决设置 ...
相关推荐
Web弹出窗口对话框.pdf
web 另类弹出窗口web 另类弹出窗口
lhgdialog web下的弹出窗口lhgdialog web下的弹出窗口lhgdialog web下的弹出窗口lhgdialog web下的弹出窗口lhgdialog web下的弹出窗口
layer弹出层组建,web弹出窗口,加载任意html内容,加载iframe等效果,,您的页面会轻松地拥有丰富友好的操作体验。
弹出窗口,提示,web页面 WEB窗口右下角弹出窗口提示效果
一机双屏,一机多屏,web前端打开新页面到扩展屏幕demo,通过presentation API打开窗口(谷歌浏览器版本) PS:需采用服务器方式启动index项目,请勿双击谷歌浏览器直接打开
在WEB中实现类似于Windows软件的弹出窗口的代码(C#,VB)
JS弹出窗口使用说明。本文档是我的另一资源“JS弹出窗口收藏版案例源码”的详细使用说明。如果看代码费劲,可以看此说明文档。
DELPHI7编写OCX控件,WEB成功调用,有窗口,也有有函数,可在WEB弹出窗口。WIN10 360浏览器兼容模式下成功通过。
GridView系列---GridView弹出窗口
lhgdialog web下的弹出窗口http://download.csdn.net/detail/dz45693/3322723的更新
在 web应用中,比如OA中,经常要用到一些提示,比如EMAIL到达了,就做个象MSN那样的提示框,弹出给用户提示,然后再关闭。在ASP.net 2.0的ajax中,这个现在不难做到了,刚好看到老外的一篇文章,讲解到,下面小结之
使用js+div模拟弹出窗口,有可以移动的窗口,不可以移动的窗口,移动时候可以让div半透明效果。
弹出窗口在Web中的应用.pdf
jquery版web消息弹出小窗口
JS拖动DIV,适用于web开发,拖动弹出窗口,简单易用!!
jquery简单的点击按钮弹出窗口动画效果 jquery简单的点击按钮弹出窗口动画效果
web页面右下角弹出窗口,用jquery实现。支持jquery1.7.2以上版本
主要封装Web常用JS操作:加入收藏夹、设为主页、刷新、复制、Cookie操作、弹出窗口、下来列表、获取表单值、简繁转化、透明显示PNG图片等等... 其中最强大的应该算Div弹出窗口、Div下拉列表了,扩展性相当的好。...
Delphi实现的右下角弹出窗口,类似网页上的右下角广告窗口、重要信息公告窗口,在WEB设计中更多用于广告了,在Delphi软件中,你同样可以把本弹出窗口用于广告设计中,支持关闭功能。