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

背景

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

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

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

复制代码

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

缺点：

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

重写

步骤

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

编写函数

1、定义默认样式

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

复制代码

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

1. function showModalDialog(pageUrl, comeInParams, iframeStyle) {
2.     //获取传进来的宽高
3.     iframeStyle = iframeStyle.replace(/dialogwidth/g, "width");
4.     iframeStyle = iframeStyle.replace(/dialogHeight/g, "height");
6.     //获取项目顶层的 document
7.     var topDoc = window.top.document;
8.     var topDocBody = window.top.document.body;
9.     var mainFrameSet = topDoc.querySelector("#setMain");
10.    
11.     // 最终生成的模态框会插入到 mainFrameSetParent 中
12.     var mainFrameSetParent = mainFrameSet.parentNode;
13.    
14.     return new Promise((resolve, reject) => {
15.         //···
16.     })
17. }

复制代码

这里返回一个 promise ，返回值也会通过 resolve 返回给父级页面，父页面通过 .then 或者 await 接收。
3、创建弹框盒子，弹框header，iframe区域，footer，添加遮罩层

1. return new Promise((resolve, reject) => {
2.     //创建弹框盒子，添加遮罩层
3.     var dialog = document.createElement("div");
4.     dialog.className = DIALOG_CLASS + Date.now();
5.     dialog.style = DIALOG_STYLE + ";width:" + topDocBody.clientwidth + "px;";
7.     //创建弹框里面用来包裹iframe的 div
8.     var dialogBody = document.createElement("div");
9.     dialogBody.className = "dialogBody";
10.     var marginLeft = parseFloat(
11.       iframeStyle.match(/width\:(\d)+px;/g)[0].replace("width:", "")
12.     );
13.     var marginTop = parseFloat(
14.       iframeStyle.match(/height\:(\d)+px;/g)[0].replace("height:", "")
15.     );
16.     dialogBody.style =
17.       SUB_STYLE +
18.       ";margin-left:-" +
19.       marginLeft / 2 +
20.       "px;margin-top:-" +
21.       marginTop / 2 +
22.       "px;";
24.     //创建 header
25.     var header = document.createElement("div");
26.     header.className = "dialog_header";
27.     header.style = dialog_header_style;
28.     var headerBtn = document.createElement("div");
29.     headerBtn.style =
30.       "cursor:pointer;text-align:right;padding-right:10px;font-size: 20px;user-select: none;";
31.     headerBtn.textContent = "x";
32.     headerBtn.onclick = function () {
33.       mainFrameSetParent.removeChild(dialog);
34.     };
35.     header.appendChild(headerBtn);
37.     //创建 iframe 包裹层
38.     var iframe = document.createElement("iframe");
39.     iframe.src = pageUrl;
40.     iframe.className = "modernDialogIframe";
41.     iframe.style = IFAME_STYLE + iframeStyle;
42.     iframe.destroy = function (returnValue) {
43.       resolve(returnValue);
44.       mainFrameSetParent.removeChild(dialog);
45.       removeStorageClass();
46.     };
47.     dialogBody.appendChild(header);
48.     dialogBody.appendChild(iframe);
49.     dialog.appendChild(dialogBody);
50.    
51.     var removeStorageClass = function () {
52.       var existClass = sessionStorage.getItem("dialogClass");
53.       if (existClass) {
54.         sessionStorage.setItem(
55.           "dialogClass",
56.           existClass.split(",").pop().join(",")
57.         );
58.       }
59.     };
60.    
61.     //将创建好的弹框插入顶层 document
62.     mainFrameSetParent.appendChild(dialog);
63.    
64.     // 通过sessionStorage 存储当前显示的弹框的类名，
65.     //给某些特定页面（通过windbw.close 关闭不了的页面，因为里面的window可能表单操作刷新了window）使用
66.     var session = sessionStorage.getItem('dialogClass')
67.     sessionStorage.setItem('dialogClass',session ? (session + ',' + dialog.className) : dialog.className)

复制代码

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

1. var modernDialogIframe = topDoc.querySelector(
2.   "." + dialog.className + " .modernDialogIframe"
3. );
4. var tempValue = null;
5. //监听 iframe 包裹的目标页面的加载情况
6. modernDialogIframe.contentwindow.addEventListener("load", function () {
7.   this.dialogArguments = comeInParams;
8.   this.oldClose = this.close;
9.   //重写当前页面的 window.close
10.   this.close = function () {
11.     // returnValue 是业务页面中定义的全局变量
12.     tempValue = this.returnValue;
13.     setTimeout(function () {
14.       resolve(tempValue);
15.     }, 10);
16.     mainFrameSetParent.removeChild(dialog);
17.     removeStorageClass();
18.     this.oldClose();
19.   };
20. });

复制代码

完整代码

1. //定义默认样式
2. var DIALOG_CLASS = "modernShowDialog";
3. var SUB_STYLE =
4. "position:absolute;top:50%;left:50%;margin-1eft:-50%;margin-top:150px;background:#fff;border-radius: 4px;";
5. var IFAME_STYLE = "width:100%;border: none;height: 70%;";
6. var dialog_header_style =
7. "width:100%;height:32px;font-size:14px;line-height:34px;";
9. /**
10. * 模拟 IE 的 showModalDialog 方法，同样接收三个参数；
11. * pageUrl 表示要显示的页面地址
12. * comeInParams 表示传进目标页面的参数
13. * iframeStyle 表示自定义页面样式，比如宽高
14. **/
16. function showModalDialog(pageUrl, comeInParams, iframeStyle) {
17.   iframeStyle = iframeStyle.replace(/dialogwidth/g, "width");
18.   iframeStyle = iframeStyle.replace(/dialogHeight/g, "height");
20.   //获取项目顶层的 document，弹框显示需要覆盖顶层页面
21.   var topDoc = window.top.document;
22.   var mainFrameSet = topDoc.querySelector("#setMain");
23.   var mainFrameSetParent = mainFrameSet.parentNode;
24.   var topDocBody = window.top.document.body;
26.   return new Promise((resolve, reject) => {
27.     //创建弹框盒子，添加遮罩层
28.     var dialog = document.createElement("div");
29.     dialog.className = DIALOG_CLASS + Date.now();
30.     dialog.style = DIALOG_STYLE + ";width:" + topDocBody.clientwidth + "px;";
32.     //创建弹框里面用来包裹iframe的 div
33.     var dialogBody = document.createElement("div");
34.     dialogBody.className = "dialogBody";
35.     var marginLeft = parseFloat(
36.       iframeStyle.match(/width\:(\d)+px;/g)[0].replace("width:", "")
37.     );
38.     var marginTop = parseFloat(
39.       iframeStyle.match(/height\:(\d)+px;/g)[0].replace("height:", "")
40.     );
41.     dialogBody.style =
42.       SUB_STYLE +
43.       ";margin-left:-" +
44.       marginLeft / 2 +
45.       "px;margin-top:-" +
46.       marginTop / 2 +
47.       "px;";
49.     //创建 header
50.     var header = document.createElement("div");
51.     header.className = "dialog_header";
52.     header.style = dialog_header_style;
53.     var headerBtn = document.createElement("div");
54.     headerBtn.style =
55.       "cursor:pointer;text-align:right;padding-right:10px;font-size: 20px;user-select: none;";
56.     headerBtn.textContent = "x";
57.     headerBtn.onclick = function () {
58.       mainFrameSetParent.removeChild(dialog);
59.     };
60.     header.appendChild(headerBtn);
62.     //创建 iframe 包裹层
63.     var iframe = document.createElement("iframe");
64.     iframe.src = pageUrl;
65.     iframe.className = "modernDialogIframe";
66.     iframe.style = IFAME_STYLE + iframeStyle;
67.     iframe.destroy = function (returnValue) {
68.       resolve(returnValue);
69.       mainFrameSetParent.removeChild(dialog);
70.       removeStorageClass();
71.     };
72.     dialogBody.appendChild(header);
73.     dialogBody.appendChild(iframe);
74.     dialog.appendChild(dialogBody);
75.     var removeStorageClass = function () {
76.       var existClass = sessionStorage.getItem("dialogClass");
77.       if (existClass) {
78.         sessionStorage.setItem(
79.           "dialogClass",
80.           existClass.split(",").pop().join(",")
81.         );
82.       }
83.     };
85.     //将创建好的弹框插入顶层 document
86.     mainFrameSetParent.appendChild(dialog);
87.     // 通过sessionStorage 存储当前显示的弹框的类名，给某些特定页面（通过windbw.close 关闭不了的页面，因为里面的window可能表单操作刷新了window）使用
88.     var session = sessionStorage.getItem('dialogClass')
89.     sessionStorage.setItem('dialogClass',session ? (session + ',' + dialog.className) : dialog.className)
90.        
91.     var modernDialogIframe = topDoc.querySelector(
92.       "." + dialog.className + " .modernDialogIframe"
93.     );
95.     var tempValue = null;
96.     //监听 iframe 包裹的目标页面的加载情况
97.     modernDialogIframe.contentwindow.addEventListener("load", function () {
98.       this.dialogArguments = comeInParams;
99.       this.oldClose = this.close;
100.       //重写当前页面的 window.close
101.       this.close = function () {
102.         tempValue = this.returnValue;
103.         setTimeout(function () {
104.           resolve(tempValue);
105.         }, 10);
106.         mainFrameSetParent.removeChild(dialog);
107.         removeStorageClass();
108.         this.oldClose();
109.       };
110.     });
111.   });
112. }

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！