谷歌浏览器中window.showModalDialog的替代方式

前言

由于之前系统都是使用的jsp，这种jsp页面一般也都是在ie浏览器中打开，所以很多的弹出新页面都是采用的window.showModalDialog的方式，比如弹出对话框，或者调用一个第三方页面（常用的方式有审计页面等）。

采用这种方式的好处是可以使用同步的方式接收到子页面的返回值（弹出的页面称为为子页面，当前页面称为父页面）。

使用案例

1、父页面传递值到子页面

  var obj = new Object();
  obj.name = "cz";
  obj.id="18";

  var url = vContextPath + "/page/testldenModel/tessp?"
  var retVal = window.showModalDialog(url, obj, "dialogWidth=700px;dialogHeight=500px;");
  

2、子页面获取父页面传递的值

var obj = window.dialogArguments;
alert(obj.name);
alert(obj.id);

window.showModalDialog虽然好用，但是对一些现代化浏览器不太友好，比如谷歌的一些低版本就不太支持，但是还能用，到了高版本就干脆不能用了，用了就报错。那么如何解决呢？

解决方式

var targetWin;
var funcName = "";
function showBank(func) {
funcName = func;
var  iWidth=700; //模态窗口宽度
var  iHeight=450;//模态窗口高度
var  iTop=(window.screen.height-iHeight-100)/2;
var  iLeft=(window.screen.width-iWidth)/2;
var winOption='height='+iHeight+',innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=no,resizeable=no,location=no,status=no';

var obj = new Object();
obj.name="cz";
obj.age="18";
var returnValue;
//增加浏览器的判断，ie走if原有逻辑，非ie走else逻辑,通过遮罩层实现。
var a1 = navigator.userAgent;
var yesIE = a1.search(/Trident/i);
if(window.ActiveXObject || window.attachEvent || yesIE > 0){ //IE
  var returnValue=window.showModalDialog("b.html?id="+new Date(), obj, "dialogHeight:"+iHeight+"px; dialogWidth:"+iWidth+"px; toolbar:no; menubar:no;  titlebar:no; scrollbars:yes; resizable:no; location:no; status:no;left:"+iLeft+"px;top:"+iTop+"px;");
  var me = new Object();
  me.data=returnValue;
  receiveMsg(me);
}else{  //非IE
  showDiv();//显示遮罩层

  //post方式调用goldbankServlet.do
  openWindowWithPostRequest(iWidth, iHeight, iTop, iLeft, winOption, obj);

//以下为get方式调用，建议使用post方式，增加系统安全性


//接收窗口返回的消息
//使用html5方法接收返回值，需要浏览器支持
  if (window.addEventListener) {
    //为window注册message事件并绑定监听函数
    window.addEventListener('message', receiveMsg, false);
  }else {
    window.attachEvent('message', receiveMsg);
  }
}
}

function openWindowWithPostRequest(iWidth,iHeight,iTop,iLeft,winOption, obj) {
var winName="sWindow";
var winURL="xxxxx/xxxx/xx.action";
// 这里以表单post方式为例
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", winURL);
form.setAttribute("target",winName);
for (var i in obj) {
  if (obj.hasOwnProperty(i)) {
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = i;
    input.value = obj [i];
    form.appendChild(input);
  }
}
document.body.appendChild(form);
//打开地址，刚开始时，打开一个不存在的地址，这样才有返回值                 
targetWin = window.open("" , winName,"dialogWidth=700px;dialogHeight=500px;");
form.target = winName;
form.submit();
document.body.removeChild(form);
if (window.focus) {
  targetWin.focus();
}
}
//接收返回值后处理函数
function receiveMsg(e){
returnValue=e.data;
alert("接收到的返回值"+e.data);

/**
 *
 *在这里处理业务，执行回调函数
 */
if(returnValue !='undefined' && returnValue != ''){
  eval(this.funcName);
}
if(targetWin!=null){
  targetWin.close();
  closeDiv();//关闭遮罩层
}
}


//回调测试函数
function test1(){
alert("test1");
}


function showDiv(){
      // 这里的main_region是最外层的div，这里主要通过css蒙层来防止出现弹框后还能点击页面。
  document.getElementById('main_region').style.display='block';

}
function closeDiv(){
  document.getElementById('main_region').style.display='none';
  
}