其实这里需要解决的是,在一个页面 A 中嵌入一个iframe B,A 和 B 不属于同一个域,但是 A 和 B 需要进行一些必要的通信,传递少量的数据信息,所以问题的实质就是主页面与跨域 iframe 之间怎么通信,也就是怎么传递数据信息
下面就针对两种不同的需求,总结一些比较简单,常用和稳定的解决方案。
- 主页面A 怎么向 iframe B 传递数据
- iframe B 怎么向 主页面A 传递数据
A向B好传值..B向A传值则需要一个代理的iframe C....B嵌套C..C与A同域
IframeA.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/getUrlParam.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A</title>
</head>
<body>
<p>aaaa</p>
<iframe id="frameB" style="width:100%;height:100%;border:0;" src="http://192.168.2.100:8080/kuayuiframeB/iframeB.html"></iframe>
<input type="text" size="20" id="text1" name="text1"/>
</body>
</html>
IframeB.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.6.4.min.js">
</script>
<script type="text/javascript" src="js/getUrlParam.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframeB</title>
<script type="text/javascript">
$(document).ready(function(){
$("#CompanyID").change(function(){
alert("aaaaaaaaaaaaaa");
document.getElementById("frameC").src = "http://192.168.2.192:8080/kuayuiframeA/IframeC.html?prids=11&coid=115";
});
});
</script>
</head>
<body>
<p style="height:500px;">
zheshiBBBBB
</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;">
</iframe>
<select id="CompanyID" class="ServiceProviderName" name="CompanyID">
<option>aaaaaaaaaaaaa</option>
<option>aaaaaaaaaaaaa</option>
<option>aaaaaaaaaaaaa</option>
<option>aaaaaaaaaaaaa</option>
<option>aaaaaaaaaaaaa</option>
</select>
</body>
</html>
IframeC.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/getUrlParam.js"></script>
<script type="text/javascript" src="js/comm.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var prids = UrlParm.parm("prids");
var coid = UrlParm.parm("coid");
// window.parent.parent.document.getElementById("text1").value=prids;
alert(prids);
par.selSpId=prids;
par.selCompanyId=coid;
</script>
</head>
<body>
</body>
</html>