window.open()与window.showModalDialog

本文详细对比了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代码   收藏代码
  1. //father.html  
  2. <HTML>  
  3. <HEAD>  
  4. <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">  
  5. <TITLE></TITLE>  
  6. <script language="javascript">  
  7.   
  8. function showmodal(){  
  9. var ret = window.showModalDialog("child.htm",null,"dialogWidth:350px;dialogHeight:350px;help:no;status:no");  
  10.     if (ret){alert('子窗口返回真!');  
  11.     }else{  
  12.          alert('子窗口返回假!');  
  13.    }  
  14. }  
  15. </script>  
  16. </HEAD>  
  17.   
  18. <BODY>  
  19. <INPUT id=button1 type=button value=Button name=button1 onclick="showmodal();">  
  20. </BODY>  
  21. </HTML>  

 

 

 

    2、child.html

 

Html代码   收藏代码
  1. //child.html  
  2. <HTML>  
  3. <HEAD>  
  4. <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">  
  5. <TITLE></TITLE>  
  6. <script language="javascript">  
  7. function trans(tag){  
  8.    if (tag==0){  
  9.        window.returnValue=false;  
  10.    } else{  
  11.        window.returnValue =true;  
  12.   }  
  13.    window.close();  
  14. }  
  15. </script>  
  16. </HEAD>  
  17. <BODY>  
  18.   
  19. <INPUT id=button1 type=button value="返回真" name=button1 onclick="trans(1)">  
  20. <INPUT id=button2 type=button value="返回假" name=button2 onclick="trans(0)">  
  21.   
  22. </BODY>  
  23. </HTML>  

 

 

总结:

       这样一来可以实现从模式窗口向父窗口传递值的作用,这个returnValue除了可以是布尔值,整型值等以外还可以是个js数组,用来传递大量数据。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值