关于iframe跨域传值问题

其实这里需要解决的是，在一个页面 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>

关于iframe跨域传值问题

猜你喜欢