使用window.open替代window.ShowModalDialog,完成子页面和父页面之间的传值

使用window.ShowModalDialog可以完成子页面和父页面之间的传值,但是window.ShowModalDialog不是w3c的标准,有些浏览器不兼容,如Opera和一些低版本的浏览器,window.open是w3c标准写法,兼容性比window.ShowModalDialog要好,但window.open确没有window.ShowModalDialog对浏览器的阻塞式模式,在window.open代码执行完毕后,后面的代码就马上执行了,从而无法知道子窗口关闭时传递过来的值,经过1天的研究,终于实现了可以用window.open代替window.ShowModalDialog的方法,思路很简单,就是在子页面赋值完后先执行指定父页面的按钮事件再关闭,从而完成对子页面传递值的读取。代码分享出来,希望对遇到同样问题的有所帮助。

1.在父页面添加如下html代码

<input id="btnOpenCompleted" type="button" onclick="OpenCompleted()" value="OpenCompleted" style="display: none;" />

2.在父页面添加打开子窗口的javascript代码,窗口居中显示,如下:

function OpenChild(){

window.open('GetAllUser.aspx?controlName=btnOpenCompleted',null,'modal=yes,height=300,width=640,top='+(screen.height-400)/2+',left='+(screen.width-635)/2+',toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no');

}

GetAllUser.aspx为要打开的子页面,controlName表示在子页面中完成赋值后,执行父页面中的按钮的id名称

3.btnOpenCompleted按钮点击执行的js代码,用于完成对子页面传递过来的值的读取

function OpenCompleted(){
    var returnValue= window.ReturnValue;//子页面传过来的值
    if(returnValue!="" && typeof returnValue!="undefined"){

      var value=returnValue.substring(returnValue.indexOf("[")+1,returnValue[i].lastIndexOf(']')); 

      ....

    }

 }

4.子页面关键代码

if (!IsPostBack)
{

  if (!string.IsNullOrEmpty(Request.QueryString["controlName"]))
      hfExecuteControl.Value = Request.QueryString["controlName"];

}
<asp:HiddenField ID="hfExecuteControl" runat="server" />//从父页面传过来的controlName=btnOpenCompleted,后台赋值读取

<input id="btnOk" type="button" value="确定" class="btn" onclick="ok()" />

function ok(){//选择
    window.returnValue="123123";
    if(window.opener!=null)
        window.opener.ReturnValue="123123";
        var parentControlName=document.getElementById("hfExecuteControl").value;
        if(parentControlName!=""){
              if(window.opener!=null)
                     window.opener.document.getElementById(parentControlName).click();
              else
                     window.parent.document.getElementById(parentControlName).click();
       }
       window.close();
}

父页面直接调用OpenChild()方法即可,对子页面传递过来的值在OpenCompleted()方法里面进行处理。

 

其它解决方案:

推荐使用layer.js

http://layer.layui.com/

posted @ 2012-12-03 12:49 事理 阅读(...) 评论(...) 编辑 收藏