jquery 父窗口子窗口相关操作

iframe交互技巧

最新推荐文章于 2018-02-28 15:02:12 发布

最新推荐文章于 2018-02-28 15:02:12 发布 · 96 阅读

文章标签：

#javascript #ViewUI

本文介绍了如何使用JavaScript和jQuery操作iframe中的元素，包括修改样式、选择单选按钮及改变iframe源等。同时提供了具体代码实例。

最近项目的需要，使用到了iframe，也遇到了一些问题。

<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中的所有单选钮

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

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

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

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

<3> 使用jquery操作iframe

1 页面里有两个ifame

 
       1 <iframe id="leftiframe"></iframe>  
 
       2<iframe id="mainiframe></iframe> 
 
       3 <iframe id="leftiframe"></iframe>  
 
       4<iframe id="mainiframe></iframe>

leftiframe中jQuery改变mainiframe的src代码：

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

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

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

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

ifame包含一个someID

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

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

得到someID的内容

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

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

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

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

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