jquery iframe操作详细解析

2020-05-19 07:33:09易采站长站整理

使用jquery操作iframe


1、 内容里有两个ifame


<iframe id=”leftiframe”…</iframe>
<iframe id=”mainiframe..</iframe>


leftiframe中jQuery改变mainiframe的src代码:
$(“#mainframe”,parent.document.body).attr(“src”,”http://www.radys.cn”)


2、 如果内容里面有一个ID为mainiframe的ifame
  <iframe id=”mainifame”…></ifame>
ifame包含一个someID
<div id=”someID”>you want to get this content</div>
得到someID的内容


  $(“#mainiframe”).contents().find(“someID”).html() html 或者 $(“#mainiframe”).contains().find(“someID”).text()值


3、在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames[“iframe1”].document).find(“input[@type=’radio’]”).attr(“checked”,”true”);


那选择id自然就是依然使用find方法
$(window.frames[“iframe1”].document).find(“#id”)


4、 如上面所示
   leftiframe中的jQuery操作mainiframe的内容someID的内容
   $(“#mainframe”,parent.document.body).contents().find(“someID”).html()或者 $(“#mainframe”,parent.document.body).contents().find(“someID”).val()


使用JavaScript操纵iframe


框架间的互相引用


一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:window.frames就表示该页面内所有框架的集合,这和表单对象、链接对象、图片对象等是类似的,不同的是,这些集合是document的属性。因此,要引用一个子框架,可以使用如下语法:


window.frames[“frameName”];


window.frames.frameName


window.frames[index]


其中,window字样也可以用self代替或省略,假设frameName为页面中第一个框架,则以下的写法是等价的:


self.frames[“frameName”]


self.frames[0]


frames[0]


frameName


每个框架都对应一个HTML 页面,所以这个框架也是一个独立的浏览器窗口,它具有窗口的所有性质,所谓对框架的引用也就是对window对象的引用。有了这个window对象,就可以很方便地对其中的页面进行操作,例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。


下面分别介绍不同层次框架间的互相引用:


1.父框架到子框架的引用


知道了上述原理,从父框架引用子框架变的非常容易,即: