Hopes

Start Here..

 

弹出Web窗体

1、不能使用window.parent  Window.parent是用来在frame中进行操作的,在对话框中不能用来操作父窗口对象  
2、正确的做法 调用modaldialog时通过传参数的方式操作
例: 需求 父窗口页面为a.html 子窗口页面为b.html。a.html中有文本框id为test1,在打开的对话框中点击按钮,将a.html的文本框值改为“子窗口值”。

实现 打开对话框时把test1作为参数传给子窗口,在子窗口中获取参数,将参数对象(即a.html中传过来的text对象)的value属性值设置为“子窗口值” 注意:这里只能传id,不能传name

a.html代码如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>a.html</title> </head> <body> <input type=text id=test1 value=''> <input type=button value=" OK " onclick='window.showModalDialog("b.html", test1)'> </body> </html> b.html代码如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>b.html</title> <script language=javascript> function func1(){ //获取父窗口传过来的参数 var ptextid = window.dialogArguments; if(ptextid != undefined){ //将父窗口传过来的对象的值改为“子窗口值” ptextid.value = "子窗口值"; //关闭子窗口 window.close(); } } </script> </head> <body> <input type=button value=" OK " onclick=func1()> </body> </html>

如果需要操作的父窗口对象比较多,也可以将window或window.document作为参数传给子窗口。
例: 需求 a.html中添加id为“aform”的的form,form中有id为test2的文本框,在b.html中,除了进行上面的操作之外,还要将test2的值改为“子窗口值2”,并将form提交到c.html。

实现1 将a.html中打开对话框的函数改为如下方式: window.showModalDialog("b.html", window.document); 将b.html中func1()改为如下: function func1(){ var pdoc = window.dialogArguments; if(pdoc!=undefined){ pdoc.all.test1.value="子窗口值"; pdoc.all.test2.value="子窗口值2"; pdoc.all.aform.action="c.html"; pdoc.all.aform.submit(); } }

实现2 因为在子窗口中对父窗口进行的操作比较多,也可以采用execScript的方式实现。 将a.html中打开对话框的函数改为如下方式: window.showModalDialog("b.html", window); 添加javascript函数如下 function func(){ test1.value="子窗口值"; document.all.test2.value="子窗口值2"; aform.action="c.html"; aform.submit(); } 将b.html中func1()改为如下: function func1(){ var pwin = window.dialogArguments; if(pwin!=undefined){ var codeStr = "func();" pwin.execScript(codeStr,"javascript"); window.close(); } }




补充:

window.open( 'index.htm ', 'title ', 'height=100,width=200,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no ') 

window.showModalDialog( 'index.htm ', 'title ', 'scrollbars=yes;resizable=no;help=no;status=no;dialogTop=25;   
dialogLeft=0;dialogHeight=400px '); 

window.showModelessDialog( 'index.htm ', 'title ', 'scrollbars=yes;resizable=no;help=no;status=no;dialogTop=25;   
dialogLeft=0;dialogHeight=400px '); 

'index.htm '   弹出窗口的目标文件名 
'title '           弹出窗口的标题 
height             弹出窗口的高度 
width               弹出窗口的宽度 
top                   弹出窗口与屏幕上方的距离 
left                 弹出窗口与屏幕左侧的距离 
toolbar=no           是否显示工具栏,如果显示则为yes 
menubar=no           是否显示菜单栏,如果显示则为yes 
scrollbars=no     是否显示滚动条,如果显示则为yes 
location=no         是否显示地址栏,如果显示则为yes 
status=no             是否显示状态栏,如果显示则为yes 
resizable=no       是否允许改变窗口大小,如果允许则为yes

showModalDialog()、showModelessDialog()方法使用详解 

javascript有许多内建的方法来产生对话框,如:window.alert(),   window.confirm(),window.prompt().等。   然而IE提供更多的方法支持对话框。如:   

  showModalDialog()   (IE   4+   支持)   
  showModelessDialog()   (IE   5+   支持)   


window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。   
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。   

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

使用方法如下:   
vReturnvalue   =   window.showModalDialog(sURL   [,   vArguments]   [,   sFeatures])   
vReturnvalue   =   window.showModelessDialog(sURL   [,   vArguments]   [,   sFeatures])   
参数说明:   
sURL   
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。   
vArguments   
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。   
sFeatures   
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。   
    dialogHeight   对话框高度,不小于100px,IE4中dialogHeight   和   dialogWidth   默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。   
  dialogWidth:   对话框宽度。   
  dialogLeft:   距离桌面左的距离。   
  dialogTop:   离桌面上的距离。   
  center:   {yes   |   no   |   1   |   0   }:窗口是否居中,默认yes,但仍可以指定高度和宽度。   
  help:   {yes   |   no   |   1   |   0   }:是否显示帮助按钮,默认yes。   
  resizable:   {yes   |   no   |   1   |   0   }   [IE5+]:是否可被改变大小。默认no。   
  status:   {yes   |   no   |   1   |   0   }   [IE5+]:是否显示状态栏。默认为yes[   Modeless]或no[Modal]。   
    scroll:{   yes   |   no   |   1   |   0   |   on   |   off   }:指明对话框是否显示滚动条。默认为yes。   

    还有几个属性是用在HTA中的,在一般的网页中一般不使用。   
    dialogHide:{   yes   |   no   |   1   |   0   |   on   |   off   }:在打印或者打印预览时对话框是否隐藏。默认为no。   
    edge:{   sunken   |   raised   }:指明对话框的边框样式。默认为raised。   
    unadorned:{   yes   |   no   |   1   |   0   |   on   |   off   }:默认为no。   

传入参数:   
要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:   

test1.htm   
====================   
<script>   
    var   mxh1   =   new   Array( "mxh ", "net_lover ", "孟子E章 ")   
    var   mxh2   =   window.open( "about:blank ", "window_mxh ")   
    //   向对话框传递数组   
    window.showModalDialog( "test2.htm ",mxh1)   
    //   向对话框传递window对象   
    window.showModalDialog( "test3.htm ",mxh2)   
</script>   

test2.htm   
====================   
<script>   
    var   a   =   window.dialogArguments   
    alert( "您传递的参数为: "   +   a)   
</script>   

test3.htm   
====================   
<script>   
    var   a   =   window.dialogArguments   
    alert( "您传递的参数为window对象,名称: "   +   a.name)   
</script>   

可以通过window.returnvalue向打开对话框的窗口返回信息,当然也可以是对象。例如:   

test4.htm   
===================   
<script>   
    var   a   =   window.showModalDialog( "test5.htm ")   
    for(i=0;i <a.length;i++)   alert(a)   
</script>   

test5.htm   
===================   
<script>   
function   sendTo()   
{   
    var   a=new   Array( "a ", "b ")   
    window.returnvalue   =   a   
    window.close()   
}   
</script>   
<body>   
<form>   
    <input   value= "返回 "   type=button   onclick= "sendTo() ">   
</form>   

常见问题:   
1,如何在模态对话框中进行提交而不新开窗口?   
如果你   的   浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作:例子,   

test6.htm   
===================   
<script>   
    window.showModalDialog( "test7.htm ")   
</script>   

test7.htm   
===================   
if(window.location.search)   alert(window.location.search)   
<frameset   rows= "0,* ">   
    <frame   src= "about:blank ">   
    <frame   src= "test8.htm ">   
</frameset>   

test8.htm   
===================   
<form   target= "_self "   method= "get ">   
<input   name=txt   value= "test ">   
<input   type=submit>   
</form>   
<script>   
if(window.location.search)   alert(window.location.search)   
</script>   
2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗?   
答案是不能。但在frame里是可以的。   

-------------------------------------------   
另外:   
www.csdn.net   
本人整理   

问:   
1.模态窗口的打开   
2.模态窗口的关闭   
3.模态窗口的传递参数。   
4.其他。。。。   

hgknight(江雨.net)答:   
1.window.showModalDialog( "DialogPage.aspx ", "newwin ", "dialogHeight:   200px;   dialogWidth:   150px;   dialogTop:   458px;   dialogLeft:   166px;   edge:   Raised;   center:   Yes;   help:   Yes;   resizable:   Yes;   status:   Yes; ");   

2.window.close();   

3.传值   
ParentPage.aspx:   
window.showModalDialog( "DialogPage.aspx?para1=aaa&para;2=bbb ");   

DialogPage.aspx:   
string   str1=Request.QueryString[ "para1 "].toString();   
string   str2=Request.QueryString[ "para2 "].toString();   

返回值   
DialogPage.aspx:   
window.returnvalue= "aaa ";   

ParentPage.aspx:   
var   str=window.showModalDialog( "DialogPage.aspx ");   

4.   
aspx页面在showmodeldialog情况下为什么一提交就重新打开一个页面?   
showmodaldialog打开的页面中在 <head> </head> 之间加入一行: <base   target= "_self ">   
--------------------------------------------   
snowjin78(方圆)   
以前,我也问过此类问题,现把收获贴如下(当然好多东西都是别人告诉我的):   
最好不要用Response.Write(     "     <script....     </script     >     ")这样的方法注册客户端脚本,而应该用Page.RegisterStartupScript或Page.RegisterClientScriptBlock方法来注册.   
Page.RegisterClientScriptBlock:       
在     Page     对象的         <form     runat=     server     >     元素的开始标记后立即发出客户端脚本       
Page.RegisterStartupScript:       
该方法在     Page     对象的         <form     runat=     server     >     元素的结束标记之前发出该脚本   

客户端代码有两个问题,第一是把window写成了Window,javascript是严格区分大小写的,用Window是肯定会出错的;第二个问题是设置对话框的宽度用dialogWidth,高度用dialogHeight,而不是height和width。! 










12
| 评论(1)

posted on 2012-08-18 20:17 ** 阅读(491) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

公告

你好!

常用链接

留言簿(2)

随笔档案

文章分类

文章档案

新闻档案

相册

收藏夹

C#学习

友情链接

搜索

最新评论

阅读排行榜

评论排行榜