摘要：
接管别人的项目，因开发时用了showmodaldialog导致最近很多用户chrome升级到最新之后就无法弹窗了。原因是新版chrome[37+]不再支持showmodaldialog。showmodaldialog并不是W3C标准内的方法，起源于IE,当是低版本的firefox也是不支持的，后来不知怎么了又纳入了这个方法。window.showModalDialog;//定义一个全局变量判定是否有原生showModalDialog方法if(!){window.onbeforeunload=function(){window.opener.hasOpenWindow=false;//弹窗关闭时告诉opener：它子窗口已经关闭}}//定义window.showModalDialog如果它不存在if{window.showModalDialog=function{if{alert("您已经打开了一个窗口！
接管别人的项目，因开发时用了showmodaldialog 导致最近很多用户chrome升级到最新之后 就无法弹窗了。原因是新版chrome[37+]不再支持showmodaldialog。
showmodaldialog 并不是W3C标准内的方法，起源于IE, 当是低版本的firefox也是不支持的，后来不知怎么了又纳入了这个方法。貌似opera和safari都不支持。随着web标准的日益规范化，估计Firefox 和 IE都不会再支持它了。所以建议经常使用它做数据交互的同学可以抛弃它了，改用js和div封装的弹窗组件吧。
下面我贴出我解决此问题的方法。
因为我这个项目是嵌套很多iframe的。弹窗口会有数据回传。弹窗之上又有弹窗也会有值回传。3级或者更多。所以我把兼容的js代码写在一个文件，所有涉及弹窗口的页面均调用这个脚本文件：
common.js
[javascript]view plaincopy
- varhas_showModalDialog=!!window.showModalDialog;//定义一个全局变量判定是否有原生showModalDialog方法
- if(!has_showModalDialog&&!!(window.opener)){
- window.onbeforeunload=function(){
- window.opener.hasOpenWindow=false;//弹窗关闭时告诉opener：它子窗口已经关闭
- }
- }
- //定义window.showModalDialog如果它不存在
- if(window.showModalDialog==undefined){
- window.showModalDialog=function(url,mixedVar,features){
- if(window.hasOpenWindow){
- alert("您已经打开了一个窗口！请先处理它");//避免多次点击会弹出多个窗口
- window.myNewWindow.focus();
- }
- window.hasOpenWindow=true;
- if(mixedVar)varmixedVar=mixedVar;
- //因window.showmodaldialog与window.open参数不一样，所以封装的时候用正则去格式化一下参数
- if(features)varfeatures=features.replace(/(dialog)|(px)/ig,"").replace(/;/g,',').replace(/:/g,"=");
- //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no");
- //window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
- varleft=(window.screen.width-parseInt(features.match(/width[s]*=[s]*([d]+)/i)[1]))/2;
- vartop=(window.screen.height-parseInt(features.match(/height[s]*=[s]*([d]+)/i)[1]))/2;
- window.myNewWindow=window.open(url,"_blank",features);
- }
- }
执行弹出的当前页的方法用例：(有返回值)
[javascript]view plaincopy
- functionselectHotel(){
- url='hotel/listHotelForChoose.action';
- varhotelIdList=window.showModalDialog(url,"hotel","dialogWidth:1020px;dialogHeight:500px;help:no;resizable:no;center:yes;scroll:yes;status:no");
- if(!has_showModalDialog)return;//chrome返回因为showModalDialog是阻塞的open不一样;
- $("#content").append(hotelIdList);
- }
- functionselectHotelChrome(option){//为打开的窗口定义方法，让打开的窗口关闭时通过window.opener赋值回来并执行
- $("#content").append(option);
- }
子窗口这样调用：
[javascript]view plaincopy
- functionchooseHotels(){
- /*
- *省略了自己的业务.......
- */
- if(window.opener!=undefined){//forchrome
- window.opener.selectHotelChrome(contentIds);//关闭前调用父窗口方法
- }
- else{
- window.returnValue=contentIds;
- }
- window.close();
- }