window.open()与window.showModalDialog

最新推荐文章于 2025-05-30 10:47:34 发布

转载最新推荐文章于 2025-05-30 10:47:34 发布 · 357 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ysq2018China/p/10288628.html

文章标签：

#javascript #ViewUI

本文详细对比了window.open和window.showModalDialog两种弹出窗口方法的特点与使用场景，包括如何设置窗口属性、位置及如何在子窗口访问父窗口元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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数组，用来传递大量数据。

转载于:https://www.cnblogs.com/ysq2018China/p/10288628.html