使用window.showModalDialog弹出窗口返回值(兼容IE、FF、chrome)

returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口(模式窗口知道吧,就是打开后不能操作父窗口,只能等模式窗口关闭时才能操作)时,用于返回窗口的值,下面举个例子:

 1、main.html

 1 <script type="text/javascript">
 2 //选择文件
 3 var ActiveAssetInput;
 4 function openAsset(s)
 5 {
 6     ActiveAssetInput = s
 7     if(navigator.appName.indexOf('Microsoft')!=-1)
 8         document.getElementById(ActiveAssetInput).value=modalDialogShow_IE("./open.html",700,420); //IE 
 9     else
10         modalDialogShow_Moz("./open.html",700,420); //Moz   
11 }
12   
13 function modalDialogShow_IE(url,width,height) //IE
14     {
15     return window.showModalDialog(url,window,
16         "dialogWidth:"+width+"px;dialogHeight:"+height+"px;edge:Raised;center:Yes;help:No;Resizable:Yes;Maximize:Yes");
17     }
18   
19 function modalDialogShow_Moz(url,width,height) //Moz
20     {
21     var left = screen.availWidth/2 - width/2;
22     var top = screen.availHeight/2 - height/2;
23     activeModalWin = window.open(url, "", "width="+width+"px,height="+height+",left="+left+",top="+top);
24     window.onfocus = function(){if (activeModalWin.closed == false){activeModalWin.focus();};};
25 }
26   
27 function setAssetValue(v) //required by the asset manager
28 {
29     document.getElementById(ActiveAssetInput).value = v;
30 }
31   
32 function ShowDialog(url, width, height)
33     {
34     window.showModalDialog(url, window, "dialogWidth:" + width + "px;dialogHeight:" + height + "px;help:yes;scroll:yes;status:yes");
35     //showModalDialog创建一个显示指定 HTML 文档的模式对话框。
36 }
37 </script>
38 <form name="form1">   
39   
40 <input name="smallpic" type="text" ID="smallpic" style="wIDth:60%" maxlength="100"><input type="button" value="选择(S)" onClick="openAsset('smallpic')" class='EasySiteButton'></td>
41   
42 </form>

2、open.html

<script type="text/javascript">
bOk=false;
function doOk()
  {
  if(navigator.appName.indexOf('Microsoft')!=-1)
    window.returnValue=inpSource.value;
  else
    window.opener.setAssetValue(document.getElementById("inpSource").value);
    bOk=true;
    self.close();
  }
function doUnload()
  {
  if(navigator.appName.indexOf('Microsoft')!=-1)
    if(!bOk)window.returnValue="";
  else
    if(!bOk)window.opener.setAssetValue("");
  }
</script>
<body onUnload="doUnload()">
<div align=center>
<input type="text" id="inpSource" name="inpSource" style="border:#cfcfcf 1px solid;295" class="inpTxt"></div>
<input name="btnOk" id="btnOk" type="button" value=" ok " onClick="doOk()" class="inpBtn" onMouseOver="this.className='inpBtnOver';" onMouseOut="this.className='inpBtnOut'">
</body>

要注意的问题:

1.IE使用模式窗口打开的对话框是无法实现回传值的,就是说用.NET控件进行触发事件的话,完成之后会打开新的窗口,而不是在本来的模式窗口刷新。

解决办法,就是用Iframe。弄一个中间窗口然后把自己放在IFRAM里面

<body>
<iframe src="最终的窗口.aspx"></iframe>
</body>

这样

2.如果是CHROME ,则不能使用IFRAM 如果使用IFRAME会出现<input type="file" />控件不起作用的情况。

所以要判断是什么浏览器。。。然后URL传参,如果是IE则弄个IFRAME如果不是 就不弄 

原文地址:https://www.cnblogs.com/xdoudou/p/3030975.html