posts - 3,  comments - 12,  trackbacks - 0

<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
posted on 2011-03-07 14:14 [ 王志伟 ] 阅读(873) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航:
 

<2024年5月>
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

常用链接

留言簿(1)

随笔档案(3)

文章档案(29)

搜索

  •  

最新评论

阅读排行榜

评论排行榜