window.showModelDialog

好长时间没有用到这个东西了,今天同事问起来用没用过怎么打开一个子窗口,知道有这个东西,知道大概怎么用,但是具体的记得不是十分清楚了,就找了一下自己以前写的东西看了看,有在网上找了一篇文章,阅读了一下,感觉不错,顺便就给转帖了过来,供大家一起参考:

window.showModelDialog的使用说明与window.opener

2009-06-29 9:34

Window.ShowModalDialog使用手册 基本介绍:

showModalDialog() (IE 4+ 支持)
   showModelessDialog() (IE 5+ 支持)
   window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框。
   window.showModelessDialog() 方法用来创建一个显示HTML内容的非模态对话框。

使用方法:
   vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
   vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明:

sURL -- 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments -- 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures -- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
  ----------------
  1. dialogHeight: 对话框高度,不小于100px
  2. dialogWidth: 对话框宽度。
  3. dialogLeft: 离屏幕左的距离。
  4. dialogTop: 离屏幕上的距离。
  5. center: { yes | no | 1 | 0 } : 是否居中,默认yes,但仍可以指定高度和宽度。
  6. help: {yes | no | 1 | 0 }: 是否显示帮助按钮,默认yes。
  7. resizable: {yes | no | 1 | 0 } [IE5+]: 是否可被改变大小。默认no。
  8. status: {yes | no | 1 | 0 } [IE5+]: 是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
  9. scroll: { yes | no | 1 | 0 | on | off }:是否显示滚动条。默认为yes。
  下面几个属性是用在HTA中的,在一般的网页中一般不使用。
  10. dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
  11. edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
  12. unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

参数传递:

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


  <script>
   var obj = new Object();
   obj.name='aspxhome.com';
   window.showModalDialog('modal.htm',obj,'dialogWidth=200px;dialogHeight=100px');
  </script>

  modal.htm


  <script>
   var obj = window.dialogArguments
   alert('您传递的参数为:' + obj.name)
  </script>

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

parent.htm
  <script>
   str =window.showModalDialog('modal.htm',,'dialogWidth=200px;dialogHeight=100px');
   alert(str);
  </script>
  modal.htm
  <script>
   window.returnValue='http://www.aspxhome.com';
  </script>
例子------------------------------------------------------------------------------------------------------------------
<input type="button" onclick="selectGift();"/>
<scirpt language="javascript">
function selectGift()
{

var result = window.showModalDialog(
'GiftList.htm',
'ShowModalDialog.htm',
'dialogHeight:' + this.height +
'px;dialogWidth:' + this.width +
'px;edge: Raised; center: Yes; help: No; resizable: No; status: No; scroll: Yes;');
alert(result);
}
</script>
GiftList.htm页面
<input type="checkbox" name="Gid" value="aa"/>
<input type="checkbox" name="Gid" value="bb"/>
<input type="checkbox" name="Gid" value="cc"/>
<input type="checkbox" name="Gid" value="dd"/>
<input type="button" id="Gid" value="aa" onclick="selectAdd();"/>
<script language="javascript">
//获取传递的参数信息。
alert(window.dialogArguments);
function selectAdd()
{
var val="";
var Gids=document.getElementsByName("Gid");
for(var i=0;Gids.Length;i++)
{
val+=Gids[i].value;
}
返回值并关闭此窗口。
window.returnValue=val;
window.close();
}
</script>
=---------------------------------模态窗口可以传对象和数组-------------------------------------------------------------
主页
<body>
<div id="show"></div>
<input type="button" onclick="show();" value="showModile"/>
<input type="button" onclick="" value="close"/>

</body>

<script language="javascript" type="text/javascript">
function show()
{
var obj = new Object();
obj.name = "模态窗口";
var str = window.showModalDialog("NewWindow.htm",obj,'dialogWidth=200px;dialogHeight=100px');
document.getElementById("show").innerHTML = getValue(str);
}
function getValue(s)
{
var total = "";
//只有数组时
for(var i=0;i<s.length;i++)
{
total+=s[i];
}
//接收对象中的数组中时
for(var i=0;i<s.arr.length;i++)
{
total+=s.arr[i];
}
return total;

}
</script>

NewWindow.htm页面
<body>
<h1>NewWindow</h1>
<input type="button" onclick="returnval();"/>
</body>
<script language="javascript" type="text/javascript">
function returnval()
{
//对象中包有数组。
// var obj = new Object();
// obj.arr = new Array();
// obj.arr[0] = "aaa";
// obj.arr[1] = "bbb";
// obj.arr[2] = "bbb";

//单纯的数组类型
var obj = new Array();
obj[0]="aaa";
obj[1]="bbb";
obj[2]="ccc";
window.returnValue = obj;
window.close();
}

</script>

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

a.html父页面,b.html子页面用这个方法

window.opener.parentMethod("dd");当父页面上有parentMethod()[javascript的方法]方法时,可以这样调用

window.opener.document.getElementById("txt1");是调用父页面的方面。

window.opener属性是对包含打开它(本窗体)的脚本的窗体的引用,此属性代表一个window对象

原文地址:https://www.cnblogs.com/danghuijian/p/4400154.html