跨域 showModalDialog 获取返回值_modaldialog垮域获取返回值-优快云博客

本文链接：https://blog.youkuaiyun.com/lxl817/article/details/70238667

本文介绍了如何通过`showModalDialog`实现跨域通信并获取返回值。通过创建两个中转页面`openpage.html`和`closepage.html`，结合JavaScript进行操作，将`openpage.js`和`closepage.js`引入访问页面，最终在被访问页面设置返回值并通过`closeDialog`函数传递给调用页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文参考来自：http://www.cnblogs.com/jake1/archive/2013/04/29/showModalDialog.html

原理：

openpage.html:

<!DOCTYPE HTML>
<html>
<head>
<title>二维码支付</title>
<script src="./../../../scripts/app/amcharge/payfee/jquery-1.9.1.js" type="text/javascript"></script>
<script src="./../../../scripts/app/amcharge/payfee/OpenPage.js" type="text/javascript"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>
<iframe frameborder="0" scrolling="no" src="" id="op_iframe" style="padding:0; margin:0; border:0;"></iframe>
</body>
</html>

openpage.js

$(document).ready(function () {
//var obj= window.dialogArguments;
//var title=obj.title;
var url =getUrl();
$("#op_iframe").css("width", "1000px");
$("#op_iframe").css("height", "400px");
$("#op_iframe").attr("src", url);
//document.title = title;
document.getElementById("op_iframe").contentWindow.name = window.dialogArguments;
});

function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
function getUrl(){
var param=window.location.search.substr(1);
return param.substr("url=".length);
}

closepage.html:

<!DOCTYPE HTML>
<html>
<head>
<title>closePage.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="./../../../scripts/app/amcharge/payfee/jquery-1.9.1.js" type="text/javascript"></script>
<script src="./../../../scripts/app/amcharge/payfee/ClosePage.js" type="text/javascript"></script>


</head>

<body>
</body>
</html>

closepage.js

$(document).ready(function () {
var rv = getQueryString("objType");
parent.window.returnValue = rv;
parent.window.close();
});

function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}

以上为两个中转页面的代码。

下面是如何调用：

访问页面：注意（openpage.js和closepage.js需要引入到访问页面里）

var str=showGlutDialog(payUrl+payData,"","dialogWidth=1000px;dialogHeight=400px","二维码支付");
//var str=window.showModalDialog(payUrl+payData,"","dialogWidth=1000px;dialogHeight=400px");

if(str=="支付成功"){
Acct.ajaxSubmit('submitDetail,submitRemarkArea', 'payFeeSubmit',payFeeParam,'', payFeeSuccFunc, payFeeFailFunc);
}
else{
alert(str);
return;
}

function showGlutDialog(url, arguments, features, title) {
var dialogUrl = url;
//dialogUrl = parms(dialogUrl, "title", escape(title));
var dialogUrl = "app/amcharge/payfee/OpenPage.html";
var obj=new Object();
obj.url=url;
obj.arguments=arguments;
obj.title=title;
dialogUrl=dialogUrl+"?url="+url+arguments;
if (!features) features = null;
return window.showModalDialog(dialogUrl, obj, features);
//return window.open(dialogUrl,"wee", features);
}

被访问页面

MessageBox.success("支付成功", "点击确定关闭页面!", function(btn) {
var orderState='支付成功';
// window.returnValue=orderState;
// window.top.returnValue=orderState;
closeDialog(orderState);
});

unction closeDialog(rv) {
var url=$("#CALLBACK_URL").val();
window.location.href = url+"?objType="+rv ;
// closeNav();
// window.open(url+"?objType="+rv,"","");

}

页面测试效果：