window.open()与window.showModalDialog区别
弹出窗口两种方式:
1.window.showModalDialog:
var feature = "dialogWidth:615px;dialogHeight:505px;status:no;help:no;scroll:no;resizable:no;center:yes";
window.showModalDialog(url, Object(传给弹出窗口的参数,可以是任何类型),feature)
决定窗口的外观是第三个参数feature,其中center属性指定为"yes",弹出窗口居中;
如果想手动指定弹出窗口的具体位置,去掉center属性,
用dialogTop(弹出窗口上边界居屏幕上的距离)
dialogLeft(弹出窗口左边界居屏幕左的距离)属性
如:(距离是px像素),这里手动指定弹出窗口位置居中
var iTop = (window.screen.availHeight-550)/2; //获得窗口的垂直位置,550为弹出窗口的height;
var iLeft = (window.screen.availWidth-640)/2; //获得窗口的水平位置,640为弹出窗口的width;
var feature = "dialogWidth:640px;dialogHeight:550px;status:no;help:no;scroll:no;resizable:no;dialogTop:'+iTop+';dialogLeft:'+iLeft+';";
2.window.open:
var feature = "width=615,height=505,menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes"
window.open(url, "name(只能为字符串,不能传window)", feature)
手动指定弹出窗口位置,属性top:(弹出窗口上边界居屏幕上的距离)
属性left:(弹出窗口左边界居屏幕左的距离)
下面指定弹出窗口位置居中(这种方式没有center属性):
var iTop = (window.screen.availHeight-550)/2; //获得窗口的垂直位置,550为弹出窗口的height;
var iLeft = (window.screen.availWidth-640)/2; //获得窗口的水平位置,640为弹出窗口的width;
var feature = "width=615,height=505,top="+iTop+",left="+iLeft+",menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes";
子窗口调用父窗口的东东(控件或者方法):
1. window.open打开的子窗口有window.opener属性
子窗口通过window.opener.xxxx获得父窗口的东东。
如:window.opener.document.getElementById("userName");得到父页面的控件。
window.opener.fresh();调用父页面的js方法。
2. window.showModalDialog:不支持window.opener,
子窗口通过window.dialogArguments.xxxx获得父窗口的东东。
父窗口通过showModalDialog(url,para,feature)第二个参数para传参数给子窗口,
子窗口通过window.dialogArguments获得父窗口穿过来的东西。
如:这里传父页面的window过去
父页面:showModalDialog(url,window,feature)
子页面:var name = window.dialogArguments.document.getElementById("userName").value;得到父页面的控件。
var name = window.dialogArguments.fresh();调用父页面的方法。
这里的window.dialogArguments里的window代表父页面的window,它是通过showModalDialog方法的第二个参数window传过来的,
当然也可以传数组或其它变量。
刷新打开(window.open)此窗口的父窗口
window.opener.location.href = 'http://www.baidu.com';
window.opener.location.reload;
调用打开(window.open)此窗口的父窗口中的函数,需在服务器环境下才行
window.opener.connect_callback();
这里打开的login页窗口B里callback后执行如下代码。关闭当前login窗口B。再将用(window.open)打开窗口B的页面A刷新。
<script type="text/javascript">
document.domain = 'focus.cn';
window.opener.location.href = 'http://jia.focus.cn';
window.close();
</script>
通常在使用window.opener的时候要去判断父窗口的状态,如果父窗口被关闭或者更新,就会出错,
解决办法是加上如下的验证if(window.opener && !window.opener.closed)
但需要注意的我的环境是跨域的。所以需要加上document.domain = 'focus.cn';
因为我们的域名是jia.focus.cn shop.focus.cn admin.focus.cn等.
如果你的网站是用统一个域名而不涉及跨域的话,则不用考虑此问题。
window.returnValue使用方法
returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口(模式窗口知道吧,就是打开后不能操作父窗口,只能等模式窗口关闭时才能操作)时,用于返回窗口的值,下面举个例子:
1、parent.html
- //father.html
- <HTML>
- <HEAD>
- <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
- <TITLE></TITLE>
- <script language="javascript">
- function showmodal(){
- var ret = window.showModalDialog("child.htm",null,"dialogWidth:350px;dialogHeight:350px;help:no;status:no");
- if (ret){alert('子窗口返回真!');
- }else{
- alert('子窗口返回假!');
- }
- }
- </script>
- </HEAD>
- <BODY>
- <INPUT id=button1 type=button value=Button name=button1 onclick="showmodal();">
- </BODY>
- </HTML>
2、child.html
- //child.html
- <HTML>
- <HEAD>
- <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
- <TITLE></TITLE>
- <script language="javascript">
- function trans(tag){
- if (tag==0){
- window.returnValue=false;
- } else{
- window.returnValue =true;
- }
- window.close();
- }
- </script>
- </HEAD>
- <BODY>
- <INPUT id=button1 type=button value="返回真" name=button1 onclick="trans(1)">
- <INPUT id=button2 type=button value="返回假" name=button2 onclick="trans(0)">
- </BODY>
- </HTML>
总结:
这样一来可以实现从模式窗口向父窗口传递值的作用,这个returnValue除了可以是布尔值,整型值等以外还可以是个js数组,用来传递大量数据。