谷歌浏览器不支持模态对话框了,而原来的项目中,又使用了模态对话框的语句:showModalDialog,这样原来的项目就用不成模态对话框了。
为了不对项目做大的改变,只好写一个临时的showModalDialog函数,代替原来的对话框。
第一步:写一个判断浏览器还能否使用showModalDialog的代码
$(function(){
if(window.showModalDialog == undefined) {
window.showModalDialog = function(url, mixedVar, features) {
window.hasOpenWindow = true;
if(mixedVar)
var mixedVar = mixedVar;
if(features)
var features = features.replace(/(dialog)|(px)/ig, "").replace(/;/g, ',').replace(/\:/g, "=");
window.myNewWindow = window.open(url, "_blank", features);
}
}
})
------------------
第二步:写一个对话框的调用代码
$(function(){
$("#dlg").click(function(){
var iWidth = 500;
var iHeight = 300;
var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
var win = window.showModalDialog("b.html", "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",status=no;help=no;scrollbars=no");
$('#p1t').val(win);
});
});
如果想传入多个值,可以使用json数据的格式:
<script language="javascript" type="text/javascript">
function a() {
var couponName = $('#backname').val();
var v={name:couponName,w:12345}; //在这里写一个json,作为要回传的值,这样就可以传多值了。
if(window.opener != undefined) {
//for chrome
window.opener.returnValue = v;
} else {
window.returnValue = v;
}
window.opener.document.getElementById('p1t').value=v.w;
window.opener.aa();
window.close();
}
</script>
-------------------
第三步:在子窗口中写一个写主窗口值的函数
function a() {
var couponName = $('#backname').val();
if(window.opener != undefined) {
//for chrome
window.opener.returnValue = couponName;
} else {
window.returnValue = couponName;
}
window.opener.document.getElementById('p1t').value=couponName;
window.close();
}
--------------------------
完整主窗口代码如下:
<html>
<head>
<meta charset="utf-8" />
<title>无标题页</title>
<script src="js/jquery-3.2.1.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
if(window.showModalDialog == undefined) {
window.showModalDialog = function(url, mixedVar, features) {
window.hasOpenWindow = true;
if(mixedVar)
var mixedVar = mixedVar;
if(features)
var features = features.replace(/(dialog)|(px)/ig, "").replace(/;/g, ',').replace(/\:/g, "=");
window.myNewWindow = window.open(url, "_blank", features);
}
}
})
$(function(){
$("#dlg").click(function(){
var iWidth = 500;
var iHeight = 300;
var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
var win = window.showModalDialog("b.html", "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",status=no;help=no;scrollbars=no");
$('#p1t').val(win);
});
});
</script>
</head>
<body>
<form name="form1" action="#">
<input type="text" name="p1t" id="p1t" />
<input type="button" value="打开对话框" name="dlg" id="dlg" />
</form>
</body>
</html>
---------------------------
完整子窗口的代码如下:
<html>
<head>
<meta charset="utf-8" />
<title>无标题页</title>
<script src="js/jquery-3.2.1.js"></script>
<script language="javascript" type="text/javascript">
function a() {
var couponName = $('#backname').val();
if(window.opener != undefined) {
//for chrome
window.opener.returnValue = couponName;
} else {
window.returnValue = couponName;
}
window.opener.document.getElementById('p1t').value=couponName;
window.opener.aa();//子页面调用父页面的方法
window.close();
}
</script>
</head>
<body>
<form name="form1" action="">
<input type="text" value="输入要传的值" name="backname" id="backname">
<input type="button" value="传值" onclick="a()">
</form>
</body>
</html>
-----------------------------
相关资料:
window.opener是什么?
A窗口打开了B窗口,那么在B窗口的window.opener语句就是指A窗口。
即:window.opener 返回的是创建当前窗口的那个父窗口的引用
它与parent的区别是, window.opener仅仅是指窗口而言,而parent是指上级平台,内容比窗口要丰富的多。
子页面要向父页面传值,只要在document前面加window.opener即可,比如:
window.opener.document.getElementById('p1t').value=“12345678”;
在B页面中 window.opener.document.getElementById("A页面的id").innerHTML="<table>html</table>";自己写吧。