iframe 跨域调用父级方法的方案

时间:2023-03-09 04:30:54
iframe 跨域调用父级方法的方案

一、如果高层域名相同的话,可以通过document.domain来实现跨域访问

例如:

父级域名:localhost:8080

子级域名:localhost:9090

那么可以设置document.domain = 'localhost' 来实现跨域访问

二、如果域名没有相同之处

先来做一个假设:假如

我现在有两个系统,一个是工作流服务平台,其中一个功能就是“代办”;

另一个是OA系统,现在我要在OA系统中直接嵌入工作流服务平台的代办页面,而代办页面的中,点击处理又会打开OA系统提供的审批页面,审批页面中有个按钮“同意”;

工作流程服务平台的代办页面为 db.html,OA系统提供的审批页面为 sp.html,当在sp.html中点击“同意”按钮后,要求代办页面更新数据。

1.工作流服务平台需要的代码:(假设域名为localhost:9090)

db.html:  (子页面是sp.html)

<html>
<script>
function refresh(){
document.getElementById('data').innerHTML = '2222';
}
</script>
<body>
<div id="data">111</div>
</body>
</html>

execRefresh.html: (这是实现跨域的关键)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> exec main function </title>
</head> <body>
<script type="text/javascript">
parent.parent.refresh(); // execute main function
</script>
</body>
</html>

2.OA系统需要的代码:(假设域名为 127.0.0.1:9090)

sp.html(是db.html的子页面)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> iframe window </title> <script type="text/javascript"> // exec main function
function exec_main(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://localhost:9090/zz/execRefresh.html';
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
}else{
exec_obj.src = 'http://localhost:9090/zz/execRefresh.html?' + Math.random();
}
}
</script> </head> <body>
<p>B.html iframe</p>
<p><input type="button" value="同意" onclick="exec_main()"></p>
</body>
</html>

注:请重点注意红色字体