解决JS showModalDialog模态窗口返回值兼容性问题

本文介绍JS模态窗口在IE、Chrome等浏览器中返回值接收的兼容性问题。通过传递window对象并校验opener与dialogArguments，解决有回发或IE下无法正确返回值的状况，提供完整代码示例与原理说明。

问题背景与解决方案概述

由于系统需要兼容原IE浏览器已使用的关闭方法，经过调试测试发现，必须对window.dialogArguments进行再次验证，否则容易出现异常。

核心处理函数OKEnd


function OKEnd(vals) {
  if (vals == null) vals = "TRUE";
  if (typeof (window.opener) == "undefined") {
    if (typeof (window.dialogArguments) != "undefined") {
      if (window.dialogArguments && window.dialogArguments != null) {
        window.opener = window.dialogArguments;
        if (window.opener && window.opener != null) {
          window.opener.ReturnValue = vals;
        }
      }
    }
  }
  else {
    if (window.opener && window.opener != null) {
      window.opener.ReturnValue = vals;
    }
  }
  window.returnValue = vals;
  self.close();
}

在接收返回值时，只需在原有IE的接收模式下，额外验证一下opener即可，具体代码如下：

主窗口调用示例


//选择变更部门
     function SetOrganizeTree2() { var url="弹出页面";
       var ret = window.showModalDialog(url, window, "dialogWidth=400px;dialogHeight=500px;status=no;help=no;scroll=yes;resizable=yes;");
       if (typeof (ret) == "undefined") {
         ret = window.ReturnValue;
       }
       if (ret) {
         document.getElementById("hidDeptCode2").value = ret;
         document.getElementById("btnDeptCodeAdd").click();
       }
       return false;
     }

JS模态窗口返回值兼容问题完美解决方法

1、打开弹出窗口时，将window作为第二个参数传入。

通用返回值获取逻辑


 var result = window.showModalDialog(url, window, "dialogWidth=" + width + "px;dialogHeight=" + height + "px;resizable:yes;")

 if (typeof (result) == 'undefined') {

     result = window.ReturnValue;

   }

   return result;

2、在弹出窗口中，执行以下JS代码，以接收传入的window对象。

弹出窗口接收window对象


 if (typeof (window.opener) == 'undefined') window.opener = window.dialogArguments;

3、在弹出窗口关闭前，调用以下JS代码赋值并返回结果。

弹出窗口关闭时赋值与返回


 window.retureValue = vals;

    if (window.opener && window.opener != null)

        window.opener.ReturnValue = vals;

 

    window.close();

各浏览器兼容性原理分析

原理探讨：

在Chrome浏览器下，标准方法在弹出页面不发生回发的情况下是可以正常返回值的；但如果发生回发，则无法正常返回值。本文所述方法可以解决此问题。

在IE浏览器下，标准方法有时因不明原因无法正确返回值，使用本文方法可以解决。

Firefox浏览器未进行详细测试，但预计问题不大。

以上这篇JS模态窗口返回值兼容问题的完美解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。

JS模态窗口返回值兼容问题的完美解决方法