iframe跨域传值

最新推荐文章于 2024-03-22 11:18:02 发布

看到过风吗

最新推荐文章于 2024-03-22 11:18:02 发布

阅读量4k

点赞数

分类专栏： JavaScript杂论文章标签：跨域传值

JavaScript杂论专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

[html]view plaincopy 
   
 <!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

[html]view plaincopy 
   
  <!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

[html]view plaincopy 
   
 <!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>  

看到过风吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe跨域传值

其实这里需要解决的是，在一个页面 A 中嵌入一个iframe B，A 和 B 不属于同一个域，但是 A 和 B 需要进行一些必要的通信，传递少量的数据信息，所以问题的实质就是主页面与跨域 iframe 之间怎么通信，也就是怎么传递数据信息下面就针对两种不同的需求，总结一些比较简单，常用和稳定的解决方案。主页面A 怎么向 iframe B 传递数据iframe B 怎么向主
复制链接

扫一扫