showModalDialog之初体验

于 2008-10-10 10:47:00 发布
阅读量692 收藏
点赞数
分类专栏： UI和view层 文章标签： input javascript function button null c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tommycsdn/article/details/3048437
版权

对于模态窗口showModalDialog方法一直用的不是很熟，今天通过查了些文章和自己调试总结了一些经验

 

基本语法

father.html_________________________________________________________________________________

<title>father</title>
<script language="javascript" type="text/javascript">
<!--
 function openDialog(){　
     str=document.getElementById("txt11").value;
     var str=showModalDialog("son.html",str,"DialogHeight=290px;status=no;help=no;");
  if(str!=""&&str!=null){
     document.getElementById("txt10").value=str;
 }
 }
 -->
</script>
</head>

<body>
<br>
<br>
<br>
<div align="center">从父窗口传入子窗口的参数：<input type="text"  id="txt11"/><br>
<br>
<input type="button" value="打开对话框" align="middle" οnclick="openDialog()" /></div>
<div align="center">从子窗口传回父窗口的值：<input type="text"  id="txt10"/></div>

_____________________________________________________________________________

son.html

__________________________________________________________________________

<title>son</title>
<script language="javascript" type="text/javascript">
    function returnMain(){
     window.returnValue=document.getElementById("txt0").value;　　//从子窗口传回父窗口的值
  window.close();
 }
 function initializeSon(){
     var c=window.dialogArguments;　　//从父窗口传入子窗口的值
  if(c!=null&&c!=""){
      document.getElementById("txt1").value=c;
  }
 }    
</script>
</head>
<body οnlοad="initializeSon()">
<br>
<br>
<br>
<div align="center">从父窗口传入子窗口的参数：<input type="text" id="txt1" /></div>
<div align="center">从子窗口传回父窗口的值：<input type="text" id="txt0" /><input type="button" align="middle" value="确定返回值" οnclick="returnMain()" /></div>

________________________________________________________________________

注意：因为showModalDialog缓存的厉害，可以在子窗口代码中加入：

<meta http-equiv="expires" content="0" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />

________________________________________________________________________

一下就窗口间传递window对象、数组和对象为例：

一、传递window对象

father1.html

<title>father1</title>
<script language="javascript" type="text/javascript">
<!--
 function openDialog(){
     showModalDialog("son1.html",window,"DialogHeight=290px;status=no;help=no;");
 }
 -->
</script>
</head>

<body>
<br>
<div align="center">从父窗口传入子窗口的参数1：<input type="text"  id="txt11"/></div>
<div align="center">从父窗口传入子窗口的参数2：<input type="text"  id="txt12"/></div>
<div align="center">从父窗口传入子窗口的参数3：<input type="text"  id="txt13"/></div>
<br>
<div align="center"><input type="button" value="打开对话框" align="middle" οnclick="openDialog()" /></div>
<br>
<div align="center">从子窗口传回父窗口的参数1：<input type="text"  id="txt14"/></div>
<div align="center">从子窗口传回父窗口的参数2：<input type="text"  id="txt15"/></div>
<div align="center">从子窗口传回父窗口的参数3：<input type="text"  id="txt16"/></div>
<br>

son1.html

<title>son1</title>
<script language="javascript" type="text/javascript">
 function initializeSon(){
     var mainObj=window.dialogArguments;
  if(mainObj!=null&&mainObj!=""){
      document.getElementById("txt1").value=mainObj.document.getElementById("txt11").value;
   document.getElementById("txt2").value=mainObj.document.getElementById("txt12").value;
   document.getElementById("txt3").value=mainObj.document.getElementById("txt13").value;
  }  
 } 
 
    function returnMain(){
     var mainObj=window.dialogArguments;　
  mainObj.document.getElementById("txt14").value=document.getElementById("txt4").value;
  mainObj.document.getElementById("txt15").value=document.getElementById("txt5").value;
  mainObj.document.getElementById("txt16").value=document.getElementById("txt6").value;　
  window.close();
 }   
</script>
</head>
<body οnlοad="initializeSon()">
<br>
<br>
<br>
<br>
<div align="center">从父窗口传入子窗口的参数1：<input type="text"  id="txt1"/></div>
<div align="center">从父窗口传入子窗口的参数2：<input type="text"  id="txt2"/></div>
<div align="center">从父窗口传入子窗口的参数3：<input type="text"  id="txt3"/></div>
<div align="center"><input type="button" align="middle" value="确定返回值" οnclick="returnMain()" /></div>
<div align="center">从子窗口传回父窗口的参数1：<input type="text"  id="txt4"/></div>
<div align="center">从子窗口传回父窗口的参数2：<input type="text"  id="txt5"/></div>
<div align="center">从子窗口传回父窗口的参数3：<input type="text"  id="txt6"/></div>
<br>

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

2、传递数组

father2.html

<title>father2</title>
<script language="javascript" type="text/javascript">
<!--
 function openDialog(){
     var myArray=new Array(3);
  var myArrayBack=new Array(3);
  myArray[0]=document.getElementById("txt11").value;
  myArray[1]=document.getElementById("txt12").value;
  myArray[2]=document.getElementById("txt13").value;
     myArrayBack=showModalDialog("son2.html",myArray,"DialogHeight=290px;status=no;help=no;");
  if(myArrayBack!=null||myArrayBack!=""){
      document.getElementById("txt14").value=myArrayBack[0].toString();
      document.getElementById("txt15").value=myArrayBack[1].toString();
      document.getElementById("txt16").value=myArrayBack[2].toString();
  }
 }
 -->
</script>
</head>

<body>
<br>
<br>
<br>
<div align="center">从父窗口传入子窗口的参数1：<input type="text"  id="txt11"/></div>
<div align="center">从父窗口传入子窗口的参数2：<input type="text"  id="txt12"/></div>
<div align="center">从父窗口传入子窗口的参数3：<input type="text"  id="txt13"/></div>
<br>
<div align="center"><input type="button" value="打开对话框" align="middle" οnclick="openDialog()" /></div>
<br>
<div align="center">从子窗口传回父窗口的参数1：<input type="text"  id="txt14"/></div>
<div align="center">从子窗口传回父窗口的参数2：<input type="text"  id="txt15"/></div>
<div align="center">从子窗口传回父窗口的参数3：<input type="text"  id="txt16"/></div>
<br>

 

son2.html

<title>son2</title>
<script language="javascript" type="text/javascript">
 function initializeSon(){
     var sonArrayRev=new Array(3);
     sonArrayRev=window.dialogArguments;
  if(sonArrayRev!=null){
      document.getElementById("txt1").value=sonArrayRev[0].toString();
   document.getElementById("txt2").value=sonArrayRev[1].toString();
   document.getElementById("txt3").value=sonArrayRev[2].toString();
  }  
 } 
 
    function returnMain(){
  var arrayReturn=new Array(3);
  arrayReturn[0]=document.getElementById("txt4").value;
  arrayReturn[1]=document.getElementById("txt5").value;
  arrayReturn[2]=document.getElementById("txt6").value;　
     window.returnValue=arrayReturn;
  window.close();
 }   
</script>
</head>
<body οnlοad="initializeSon()">
<br>
<br>
<br>
<br>
<div align="center">从父窗口传入子窗口的参数1：<input type="text"  id="txt1"/></div>
<div align="center">从父窗口传入子窗口的参数2：<input type="text"  id="txt2"/></div>
<div align="center">从父窗口传入子窗口的参数3：<input type="text"  id="txt3"/></div>
<div align="center"><input type="button" align="middle" value="确定返回值" οnclick="returnMain()" /></div>
<div align="center">从子窗口传回父窗口的参数1：<input type="text"  id="txt4"/></div>
<div align="center">从子窗口传回父窗口的参数2：<input type="text"  id="txt5"/></div>
<div align="center">从子窗口传回父窗口的参数3：<input type="text"  id="txt6"/></div>
<br>

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

3、传递对象

father3.html

<title>father3</title>
<script language="javascript" type="text/javascript">
<!--
 function myObj(){  //创建一个对象
   var str1;
   var str2;
   var str3;
 }
 
 function openDialog(){
  myObj.str1=document.getElementById("txt11").value;
  myObj.str2=document.getElementById("txt12").value;
  myObj.str3=document.getElementById("txt13").value;
     returnObj=showModalDialog("son3.html",myObj,"DialogHeight=290px;status=no;help=no;");
  if(returnObj!=null){
      document.getElementById("txt14").value=returnObj.parm1;
      document.getElementById("txt15").value=returnObj.parm2;
      document.getElementById("txt16").value=returnObj.parm3;
  }
 }
 -->
</script>
</head>
<body>
<br>
<div align="center">从父窗口传入子窗口的参数1：<input type="text"  id="txt11"/></div>
<div align="center">从父窗口传入子窗口的参数2：<input type="text"  id="txt12"/></div>
<div align="center">从父窗口传入子窗口的参数3：<input type="text"  id="txt13"/></div>
<br>
<div align="center"><input type="button" value="打开对话框" align="middle" οnclick="openDialog()" /></div>
<br>
<div align="center">从子窗口传回父窗口的参数1：<input type="text"  id="txt14"/></div>
<div align="center">从子窗口传回父窗口的参数2：<input type="text"  id="txt15"/></div>
<div align="center">从子窗口传回父窗口的参数3：<input type="text"  id="txt16"/></div>
<br>

 

son3.html

<title>son3</title>
<script language="javascript" type="text/javascript">
    function sonObj(){
     var parm1;
  var parm2;
  var parm3;
 }
 function initializeSon(){
     var sonRev=window.dialogArguments;
  if(sonRev!=null){
      document.getElementById("txt1").value=sonRev.str1;
   document.getElementById("txt2").value=sonRev.str2;
   document.getElementById("txt3").value=sonRev.str3;
  }  
 } 
 
    function returnMain(){
  sonObj.parm1=document.getElementById("txt4").value;
  sonObj.parm2=document.getElementById("txt5").value;
  sonObj.parm3=document.getElementById("txt6").value;　
     window.returnValue=sonObj;
  window.close();
 }   
</script>
</head>
<body οnlοad="initializeSon()">
<br>
<br>
<br>
<br>
<div align="center">从父窗口传入子窗口的参数1：<input type="text"  id="txt1"/></div>
<div align="center">从父窗口传入子窗口的参数2：<input type="text"  id="txt2"/></div>
<div align="center">从父窗口传入子窗口的参数3：<input type="text"  id="txt3"/></div>
<div align="center"><input type="button" align="middle" value="确定返回值" οnclick="returnMain()" /></div>
<div align="center">从子窗口传回父窗口的参数1：<input type="text"  id="txt4"/></div>
<div align="center">从子窗口传回父窗口的参数2：<input type="text"  id="txt5"/></div>
<div align="center">从子窗口传回父窗口的参数3：<input type="text"  id="txt6"/></div>
<br>

 

大家看看，希望多多指教，如有更好的方法请指教：）

 

ynrainy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值