jquery 父窗口 子窗口 相关操作

<1> js或者jQuery访问页面中的框架iframe.
注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下.

 

假设：父窗口  index.html ，有 id 为 subifrm 的 iframe

 

1. 在index.html执行JS直接访问子窗口中某元素 :

 

  
    

   
     
   
     document.getElementById(
   
     '
   
     subifrm
   
     '
   
     ).contentWindow.document.getElementById(
   
     '
   
     test
   
     '
   
     ).style.color
   
     =
   
     '
   
     red
   
     '
   
      
  
    

 

2. 利用jquery 来访问子窗口

     
       

      
        
      
        $(
      
        "
      
        #subifrm
      
        "
      
        ).contents().find(
      
        "
      
        #test
      
        "
      
        ).css(
      
        '
      
        color
      
        '
      
        ,
      
        '
      
        red
      
        '
      
        );

     
       

 

====================================================================

====================================================================

 

<2> 用DOM方法与jquery方法结合的方式实现互动操作

1.在父窗口中操作 选中IFRAME中的所有单选钮

$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2.在IFRAME中操作 选中父窗口中的所有单选钮

$(window.parent.document).find("input[@type='radio']").attr("checked","true");

====================================================================

====================================================================

 

<3> 使用jquery操作iframe

1 页面里有两个ifame

<iframe id="leftiframe"></iframe>   

<iframe id="mainiframe></iframe>  

<iframe id="leftiframe"></iframe>

<iframe id="mainiframe></iframe>

 

leftiframe中jQuery改变mainiframe的src代码：

$("#mainframe",parent.document.body).attr("src","http://www.baidu.com")

 

2、 如果内容里面有一个ID为mainiframe的ifame

<iframe id="mainifame"></ifame>   

<iframe id="mainifame"></ifame> 

 

ifame包含一个someID

<div id="someID">you want to get this content</div>   

<div id="someID">you want to get this content</div> 

 

得到someID的内容

$("#mainiframe").contents().find("someID").html();或者$("#mainiframe").contains().find("someID").text(); 

$("#mainiframe").contents().find("someID").html();或者$("#mainiframe").contains().find("someID").text();  

$("#mainiframe").contents().find("someID").html();或者$("#mainiframe").contains().find("someID").text(); 

 

2 、如上面所示
   leftiframe中的jQuery操作mainiframe的内容someID的内容

$("#mainframe",parent.document.body).contents().find("someID").html();或者 $("#mainframe",parent.document.body).contents().find("someID").val();  

source: http://suan2046.javaeye.com/blog/575421