重写IE的showModalDialog模态框以兼容现代浏览器

背景

之前有个项目是 jsp 的，之前都是在 IE 浏览器上运行，现在要将这个项目做兼容性改造（信创），需要兼容谷歌。所以需要将项目中的公共弹框给改掉，而项目中模态框基本上都是用的 showModalDialog。

介绍 showModalDialog

showModalDialog 是微软在早期版本的（IE）中引入的一个方法，用于创建模态对话框。不过在现代浏览器中已经不再支持这个方法了。

用法（参考MDN）:

returnVal = window.showModalDialog(uri[, arguments][, options]);

• returnVal 模态框的返回值。
• uri 要在模态对话框中打开的页面 URI。
• arguments 可选变量。可以通过该参数将需要的值传入对话框。
• options 可选字符串参数。用于设置对话框打开的样式，使用一个或多个逗号分隔。

缺点：

• 现代浏览器不支持
• 模态框没有遮罩层，无法做到处理完模态框再处理父级页面

重写

步骤

• 使用 iframe 代替模态框中的内容包裹层（传递给模态框的uri是后台一个接口，接口返回一个jsp页面，模态框展示的就是这个页面，而 iframe 可以用来嵌入内容）
• 仍然支持 showModalDialog 的三个参数以及返回值给父页面
• 添加遮罩层，关闭模态框之前不能点击并处理父级页面
• 重写关闭模态框的方法（之前模态框关闭方法是 window.close）

编写函数

1、定义默认样式

//定义默认样式
var DIALOG_CLASS = "modernShowDialog";  //弹框类名
var SUB_STYLE =
"position:absolute;top:50%;left:50%;margin-1eft:-50%;margin-top:150px;background:#fff;border-radius: 4px;";
var IFAME_STYLE = "width:100%;border: none;height: 70%;";
var dialog_header_style =
"width:100%;height:32px;font-size:14px;line-height:34px;";

2、获取项目顶层的 document，弹框要覆盖所有页面，必须添加到顶层 window 中

function showModalDialog(pageUrl, comeInParams, iframeStyle) {
    //获取传进来的宽高
    iframeStyle = iframeStyle.replace(/dialogwidth/g, "width");
    iframeStyle = iframeStyle.replace(/dialogHeight/g, "height");

    //获取项目顶层的 document
    var topDoc = window.top.document;
    var topDocBody = window.top.document.body;
    var mainFrameSet = topDoc.querySelector("#setMain");

    // 最终生成的模态框会插入到 mainFrameSetParent 中
    var mainFrameSetParent = mainFrameSet.parentNode; 

    return new Promise((resolve, reject) => {
        //···
    })
}

这里返回一个 promise ，返回值也会通过 resolve 返回给父级页面，父页面通过 .then 或者 await 接收。

3、创建弹框盒子，弹框header，iframe区域，footer，添加遮罩层

return new Promise((resolve, reject) => {
    //创建弹框盒子，添加遮罩层
    var dialog = document.createElement("div");
    dialog.className = DIALOG_CLASS + Date.now();
    dialog.style = DIALOG_STYLE + ";width:" + topDocBody.clientwidth + "px;";

    //创建弹框里面用来包裹iframe的 div
    var dialogBody = document.createElement("div");
    dialogBody.className = "dialogBody";
    var marginLeft = parseFloat(
      iframeStyle.match(/width\:(\d)+px;/g)[0].replace("width:", "")
    );
    var marginTop = parseFloat(
      iframeStyle.match(/height\:(\d)+px;/g)[0].replace("height:", "")
    );
    dialogBody.style =
      SUB_STYLE +
      ";margin-left:-" +
      marginLeft / 2 +
      "px;margin-top:-" +
      marginTop / 2 +
      "px;";

    //创建 header
    var header = document.createElement("div");
    header.className = "dialog_header";
    header.style = dialog_header_style;
    var headerBtn = document.createElement("div");
    headerBtn.style =
      "cursor:pointer;text-align:right;padding-right:10px;font-size: 20px;user-select: none;";
    headerBtn.textContent = "x";
    headerBtn.onclick = function () {
      mainFrameSetParent.removeChild(dialog);
    };
    header.appendChild(headerBtn);

    //创建 iframe 包裹层
    var iframe = document.createElement("iframe");
    iframe.src = pageUrl;
    iframe.className = "modernDialogIframe";
    iframe.style = IFAME_STYLE + iframeStyle;
    iframe.destroy = function (returnValue) {
      resolve(returnValue);
      mainFrameSetParent.removeChild(dialog);
      removeStorageClass();
    };
    dialogBody.appendChild(header);
    dialogBody.appendChild(iframe);
    dialog.appendChild(dialogBody);

    var removeStorageClass = function () {
      var existClass = sessionStorage.getItem("dialogClass");
      if (existClass) {
        sessionStorage.setItem(
          "dialogClass",
          existClass.split(",").pop().join(",")
        );
      }
    };

    //将创建好的弹框插入顶层 document
    mainFrameSetParent.appendChild(dialog);

    // 通过sessionStorage 存储当前显示的弹框的类名，
    //给某些特定页面（通过windbw.close 关闭不了的页面，因为里面的window可能表单操作刷新了window）使用
    var session = sessionStorage.getItem('dialogClass')
    sessionStorage.setItem('dialogClass',session ? (session + ',' + dialog.className) : dialog.className)

需要注意的是，上面定义了 iframe.destroy 和 removeStorageClass 方法用来给某些特殊页面用的，那些特殊页面因为表单操作刷新了当前 window，导致调用不到了我们的重写的 close 方法。所以只能那些页面中处理完业务后手动调用 destroy 方法关闭模态框。

4、iframe加载完毕后，重写模态框的关闭方法

var modernDialogIframe = topDoc.querySelector(
  "." + dialog.className + " .modernDialogIframe"
);
var tempValue = null;
//监听 iframe 包裹的目标页面的加载情况
modernDialogIframe.contentwindow.addEventListener("load", function () {
  this.dialogArguments = comeInParams;
  this.oldClose = this.close;
  //重写当前页面的 window.close
  this.close = function () {
    // returnValue 是业务页面中定义的全局变量
    tempValue = this.returnValue;
    setTimeout(function () {
      resolve(tempValue);
    }, 10);
    mainFrameSetParent.removeChild(dialog);
    removeStorageClass();
    this.oldClose();
  };
});

完整代码

//定义默认样式
var DIALOG_CLASS = "modernShowDialog";
var SUB_STYLE =
"position:absolute;top:50%;left:50%;margin-1eft:-50%;margin-top:150px;background:#fff;border-radius: 4px;";
var IFAME_STYLE = "width:100%;border: none;height: 70%;";
var dialog_header_style =
"width:100%;height:32px;font-size:14px;line-height:34px;";

/**
 * 模拟 IE 的 showModalDialog 方法，同样接收三个参数；
 * pageUrl 表示要显示的页面地址
 * comeInParams 表示传进目标页面的参数
 * iframeStyle 表示自定义页面样式，比如宽高
**/

function showModalDialog(pageUrl, comeInParams, iframeStyle) {
  iframeStyle = iframeStyle.replace(/dialogwidth/g, "width");
  iframeStyle = iframeStyle.replace(/dialogHeight/g, "height");

  //获取项目顶层的 document，弹框显示需要覆盖顶层页面
  var topDoc = window.top.document;
  var mainFrameSet = topDoc.querySelector("#setMain");
  var mainFrameSetParent = mainFrameSet.parentNode;
  var topDocBody = window.top.document.body;

  return new Promise((resolve, reject) => {
    //创建弹框盒子，添加遮罩层
    var dialog = document.createElement("div");
    dialog.className = DIALOG_CLASS + Date.now();
    dialog.style = DIALOG_STYLE + ";width:" + topDocBody.clientwidth + "px;";

    //创建弹框里面用来包裹iframe的 div
    var dialogBody = document.createElement("div");
    dialogBody.className = "dialogBody";
    var marginLeft = parseFloat(
      iframeStyle.match(/width\:(\d)+px;/g)[0].replace("width:", "")
    );
    var marginTop = parseFloat(
      iframeStyle.match(/height\:(\d)+px;/g)[0].replace("height:", "")
    );
    dialogBody.style =
      SUB_STYLE +
      ";margin-left:-" +
      marginLeft / 2 +
      "px;margin-top:-" +
      marginTop / 2 +
      "px;";

    //创建 header
    var header = document.createElement("div");
    header.className = "dialog_header";
    header.style = dialog_header_style;
    var headerBtn = document.createElement("div");
    headerBtn.style =
      "cursor:pointer;text-align:right;padding-right:10px;font-size: 20px;user-select: none;";
    headerBtn.textContent = "x";
    headerBtn.onclick = function () {
      mainFrameSetParent.removeChild(dialog);
    };
    header.appendChild(headerBtn);

    //创建 iframe 包裹层
    var iframe = document.createElement("iframe");
    iframe.src = pageUrl;
    iframe.className = "modernDialogIframe";
    iframe.style = IFAME_STYLE + iframeStyle;
    iframe.destroy = function (returnValue) {
      resolve(returnValue);
      mainFrameSetParent.removeChild(dialog);
      removeStorageClass();
    };
    dialogBody.appendChild(header);
    dialogBody.appendChild(iframe);
    dialog.appendChild(dialogBody);
    var removeStorageClass = function () {
      var existClass = sessionStorage.getItem("dialogClass");
      if (existClass) {
        sessionStorage.setItem(
          "dialogClass",
          existClass.split(",").pop().join(",")
        );
      }
    };

    //将创建好的弹框插入顶层 document
    mainFrameSetParent.appendChild(dialog);
    // 通过sessionStorage 存储当前显示的弹框的类名，给某些特定页面（通过windbw.close 关闭不了的页面，因为里面的window可能表单操作刷新了window）使用
    var session = sessionStorage.getItem('dialogClass')
    sessionStorage.setItem('dialogClass',session ? (session + ',' + dialog.className) : dialog.className)

    var modernDialogIframe = topDoc.querySelector(
      "." + dialog.className + " .modernDialogIframe"
    );

    var tempValue = null;
    //监听 iframe 包裹的目标页面的加载情况
    modernDialogIframe.contentwindow.addEventListener("load", function () {
      this.dialogArguments = comeInParams;
      this.oldClose = this.close;
      //重写当前页面的 window.close
      this.close = function () {
        tempValue = this.returnValue;
        setTimeout(function () {
          resolve(tempValue);
        }, 10);
        mainFrameSetParent.removeChild(dialog);
        removeStorageClass();
        this.oldClose();
      };
    });
  });
}