【JavaScript】showModalDialog对父窗口进行操作

本文已参与「新人创作礼」活动，一起开启掘金创作之路

一直以来都是后端的内容比较多，今天换换胃口。

首先要说的是，这篇文章历史也比较久远了（2016年2月）。当然了，这个技术并不是我原创，我也是从别人博客中吸取过来稍作整合的。记得那时候是要做一个电信的项目用到这个功能所以做完就顺势记录了一下。

这次要说的这个技术我觉得非常有意思，是针对IE6浏览器做一个处理。

当时电信用的机器操作系统都比较旧（开发人员都已经用Windows7了，他们还在用Windows XP办公），因此他们基本上都是使用默认浏览器IE6。那时主流前端框架基本上都逐步淘汰对IE6兼容，没有办法某只能编写原生的JavaScript，因此有了这篇总结。

需求

需要在IE6使用showModalDialog对父窗口进行操作（这里就已经是两层弹窗了，父窗口再弹一个模态窗口，呵呵）

实现

1. 父窗口操作子窗口

var parValue="这个是父窗口变量值";

// 打开模态窗口
function showDailog(pageHref,title,height,width){
  // xAxis定位
  var left =(screen.availHeight-height)/2;
  // yAxis定位
  var top  =(screen.availWidth-width)/2;
  // 固定好模态窗口的位置，这个位置是能够根据窗口大小动态调整的
  var setting = window.showModalDialog(pageHref,window,title,"scrollbars=yes;resizable=no;help=no;status=no;center=yes;dialogTop=25;dialogLeft="+ left +";dialogTop="+ top +";dialogHeight="+height+"px;dialogWidth="+width+"px;");
  // 当模态窗口返回“refresh”时就执行刷新页面动作
  if (setting =="refresh"){
    window.location.reload();             
    alert("true");
  }
}

// 测试调用方法
function test(){
  alert("模态窗口成功调用父窗口的方法");
}

2. 模态窗口操作父窗口

// 获取父窗口对象
var parWin=window.dialogArguments;

...

// 实现刷新
parWin.location.reload(); 

...

// 获取父窗口中的对象("parDiv"是父窗口的一个div控件)
alert(parWin.document.getElementById("parDiv").innerHTML);
// 获取父窗口中的变量（应该返回"这个是父窗口变量值"这个字符串）
alert("父窗口变量>>>"+parWin.parValue);

...

// 调用父窗口中的方法(应该弹出alert对话框显示"模态窗口成功调用父窗口的方法")
parWin.test();

...

// 给父窗口中parDiv控件内容赋值
parWin.document.getElementById("parDiv").innerHTML="模态窗口给父窗口赋值";

...

// 关闭模态窗口
function closeDailog(){
  window.parent.close();
}

...

// 关闭父窗口（慎用）
function closeParentModal(){     
  var isIE = (navigator.appName == 'Microsoft Internet Explorer')
  //如果是IE浏览器
  if(isIE){          
    window.parent.parent.close();
    parWin.close();
  }else{
    ...
  }
}

之所以说有意思是因为当时的时代背景，那时正值IE6向IE7过渡，这个时期需要做兼容的痛苦只有那个时代的人才知道，随着IE逐渐被时代淘汰，现在微软的Edge也慢慢向大环境靠拢，相信未来应该会越来越好的。