位置 : 首页 > 经验分享 > JQUERY > jquery 父窗口 子窗口 相关操作

jquery 父窗口 子窗口 相关操作

时间:2013-02-18  人气: 收藏
jquery 父窗口 子窗口 相关操作

jquery 父窗口 子窗口 相关操作


<1> js或者jQuery访问页面中的框架iframe.
注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下.
 
假设:父窗口  index.html ,有 id 为 subifrm 的 iframe
 
1. 在index.html执行JS直接访问子窗口中某元素 :
Js代码 
document.getElementById('subifrm').contentWindow.document.getElementById('test').style.color='red' 
 
2. 利用jquery 来访问子窗口
Js代码 
$("#subifrm").contents().find("#test").css('color','red'); 
====================================================================
====================================================================
 
<2> 用DOM方法与jquery方法结合的方式实现互动操作

1.在父窗口中操作 选中IFRAME中的所有单选钮
Js代码 
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true"); 
 

2.在IFRAME中操作 选中父窗口中的所有单选钮
Js代码 
$(window.parent.document).find("input[@type='radio']").attr("checked","true"); 
====================================================================
====================================================================
 
<3> 使用jquery操作iframe
1 页面里有两个ifame
Js代码 
< iframe id="leftiframe"> 
 
 
< iframe a="" href="http://www.baidu.com" id="mainiframe></iframe>  <br />  <br />  <br /> leftiframe中jQuery改变mainiframe的src代码:<br /> Js代码  <br /> $(">http://www.baidu.com&lt;/a&gt;")&nbsp; &lt;br /&gt; &nbsp;&lt;br /&gt; &nbsp;&lt;br /&gt; 2、 如果内容里面有一个ID为mainiframe的ifame&lt;br /&gt; Js代码&nbsp; &lt;br /&gt; &lt;iframe id="mainifame"&gt;&lt;/ifame&gt;&nbsp;&nbsp; &lt;br /&gt; &nbsp;&lt;br /&gt; ifame包含一个someID&lt;br /&gt; Js代码&nbsp; &lt;br /&gt; &lt;div id="someID"&gt;you want to get this content&lt;/div&gt;&nbsp;&nbsp; &lt;br /&gt; &nbsp;&lt;br /&gt; 得到someID的内容&lt;br /&gt; Js代码&nbsp; &lt;br /&gt; $("#mainiframe").contents().find("someID").html();或者$("#mainiframe").contains().find("someID").text();&nbsp; &lt;br /&gt; &nbsp;&lt;br /&gt; 2 、如上面所示 &lt;br /&gt; &nbsp;&nbsp; leftiframe中的jQuery操作mainiframe的内容someID的内容&lt;br /&gt; Js代码&nbsp; &lt;br /&gt; $("#mainframe",parent.document.body).contents().find("someID").html();或者 $("#mainframe",parent.document.body).contents().find("someID").val();&nbsp;&lt;/p&gt;

keywords: jquery 父窗口 子窗口 相关操作


    浏览排行榜
    最新文字信息
返回顶部 关注新浪微博 关注腾讯微博