高版本chrome不再支持window.showmodaldialog 的临时替换方案【用window.open】

接管别人的项目,因开发时用了showmodaldialog 导致最近很多用户chrome升级到最新之后 就无法弹窗了。原因是新版chrome[37+]不再支持showmodaldialog。

showmodaldialog 并不是W3C标准内的方法,起源于IE, 当是低版本的firefox也是不支持的,后来不知怎么了又纳入了这个方法。貌似opera和safari都不支持。随着web标准的日益规范化,估计Firefox 和 IE都不会再支持它了。所以建议经常使用它做数据交互的同学可以抛弃它了,改用js和div封装的弹窗组件吧。

下面我贴出我解决此问题的方法。

因为我这个项目是嵌套很多iframe的。弹窗口会有数据回传。弹窗之上又有弹窗也会有值回传。3级或者更多。所以我把兼容的js代码写在一个文件,所有涉及弹窗口的页面均调用这个脚本文件:

common.js

var has_showModalDialog = !!window.showModalDialog;//定义一个全局变量判定是否有原生showModalDialog方法
if(!has_showModalDialog &&!!(window.opener)){		
	window.οnbefοreunlοad=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) var mixedVar = mixedVar;
		//因window.showmodaldialog 与 window.open 参数不一样,所以封装的时候用正则去格式化一下参数
		if(features) var features = 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"); 
		var left = (window.screen.width - parseInt(features.match(/width[\s]*=[\s]*([\d]+)/i)[1]))/2;
		var top = (window.screen.height - parseInt(features.match(/height[\s]*=[\s]*([\d]+)/i)[1]))/2;
		window.myNewWindow = window.open(url,"_blank",features);
	}
}

执行弹出的当前页的方法用例:(有返回值)

function selectHotel(){
	url = 'hotel/listHotelForChoose.action';
	var hotelIdList = 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);
}
function selectHotelChrome(option){//为打开的窗口定义方法,让打开的窗口关闭时通过window.opener赋值回来并执行
	$("#content").append(option);
}

子窗口这样调用:

function chooseHotels() {
	/*
	*省略了自己的业务.......
	*/
	if (window.opener != undefined) { //forchrome 
		window.opener.selectHotelChrome(contentIds); //关闭前调用父窗口方法
	}  
	else {  
		window.returnValue = contentIds;
	}
	window.close();
}



评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值