jquery操作iframe内部元素,iframe用法详解,jquery 操作iframe的几种方法总结

这篇文章主要是对使用jquery操作内联框架的几种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助

内联框架在复合文档中经常用到，利用jquery操作内联框架可以大幅提高效率，这里收集一些基本操作

DOM方法：父窗口操作IFRAME:窗口。框架[' IFRAME子'].documentIFRAME操作父窗口：windows。父母。文件

jquery方法：在父窗口中操作选中内联框架中的所有输入框：$(window.frames['iframeSon'].文档)。find(':text ')；在内联框架中操作选中父窗口中的所有输入框：$(window.parent.document).find(':text ')；

内联框架框架的HTML:iframe src=' test。HTML ' id=' iframeSon ' width=' 700 ' height=' 300 ' frame border=' 0 ' scrolling=' auto '/iframe

1.在父窗口中操作选中IFRAME中的所有单选钮美元(窗口。框架[' iframe 1 '].文档)。查找(' input[@type='radio']').attr('checked '，' true ')；

2.在IFRAME中操作选中父窗口中的所有单选钮美元(窗口。父母。文档).查找(' input[@type='radio']').attr('checked '，' true ')；

iframe框架的：iframe src='测试。html ' id=' iframe 1 " width=' 700 " height=' 300 " frame border=' 0 " scrolling=' auto '/iframe复制代码代码如下：HTML xmlns=' http://www。w3。org/1999/XHTML ' HEAD

MCE:脚本MCE _ src=' js/jquery-1。2 .6 .js ' src='./js/jquery-1。2 .6 .js ' type=' text/ecmascript '/MCE:SCRIPT MCE:SCRIPT type=' text/JavaScript '！-

$(function(){ $('#t1 ').hover(function(){ alert(' ')；});//$('iframe ').内容()。查找('正文').追加('我在内联框架中!');//$(window.frames['iframe1'].文档)。查找(' input[@type='text']').attr('size '，' 30px ')；//$('#iframe1 ').内容()。查找(' #d1 ').css('颜色','红色');//$(window.frames['iframe1'].文档)。find('input[@name='t1']').CSS({背景：' # 369 ' });//$('#iframe1 ').src('测试。html’)；});

//- /MCE:脚本

DIV输入id=t1 IFRAME id=IFRAME 1 src=' child。htm ' MCE _ src=' child。htm '/IFRAME IFRAME height=100 src=' child。htm ' width=300 MCE _ src=' child。htm '/IFRAME/DIV/DIV收集利用Jquery取得iframe中元素的几种方法 :

$(文档。getelementbyid(' iframeId ')。内容窗口。文档。正文).htm()$(文档。getelementbyid(' iframeId ')。内容窗口。文档。正文).htm()

显示内联框架中身体元素的内容。

$('#testId '，document.frames('iframename ').文档)。html()；$('#testId '，document.frames('iframename ').文档)。html()；

根据iframename取得其中身份证明为测试身份元素

$(window.frames['iframeName'].文档)。查找(' #testId ').html()$(窗口。框架[' iframeName '].文档)。查找(' #testId ').html()

作用同上收集网上的一些示例：

用jQuery在内联框架里取得父窗口的某个元素的值只好用数字正射影像图方法与jquery方法结合的方式实现了

1.在父窗口中操作选中内联框架中的所有单选钮$(window.frames['iframe1'].文档)。查找(' input[@type='radio']').attr('checked '，' true ')；

2.在内联框架中操作选中父窗口中的所有单选钮$(window.parent.document).查找(' input[@type='radio']').attr('checked '，' true ')；

内联框架框架的：iframe src=' test。html ' id=' iframe 1 ' width=' 700 ' height=' 300 ' frame border=' 0 ' scrolling=' auto '/iframe

IE7中测试通过

使用jquery操作iframe

1、内容里有两个ifame

iframe id=' leftiframe './iframe iframe id='mainiframe./iframe

左框架中jQuery改变mainiframe的科学研究委员会代码：$('#mainframe '，parent.document.body).属性(' src '，' https://www.jb51.net ')

2、如果内容里面有一个ID为mainiframe的ifame iframe id='mainifame './ifame ifame包含一个someID div id='someID '您想要获取此内容/div得到someID的内容

$('#mainiframe ').内容()。查找(' someID ').html() html或者$('#mainiframe ').包含()。查找(' someID ').文本()值

3、在父窗口中操作选中IFRAME中的所有单选钮美元(窗口。框架[' iframe 1 '].文档)。查找(' input[@type='radio']').attr('checked '，' true ')；

那选择身份证明(识别)自然就是依然使用发现方法$(window.frames['iframe1'].文档)。查找(' #id ')

4、如上面所示 左框架中的jQuery操作mainiframe的内容someID的内容$('#mainframe '，parent.document.body).内容()。查找(' someID ').html()或者$('#mainframe '，parent.document.body).内容()。查找(' someID ').瓦尔()

使用JavaScript操纵iframe

框架间的互相引用

页面中的所有框架都以集合的形式作为窗口对象的属性提供。比如window.frames表示页面中所有框架的集合，类似于表单对象、链接对象、图片对象等。区别在于这些集合是文档的属性。因此，要引用子帧，可以使用以下语法：

window . frames[' frame name ']；

window.frames.frameName

window . frames[索引]

其中，窗口这个词也可以由self替换或省略。假设frameName是页面中的第一个框架，下面的写法是等效的：

self.frames['frameName']

self.frames[0]

框架[0]

框架名

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

以下是不同层次框架之间的引用：

1父框架到子框架的引用

知道了上述原理，从父框架引用子框架是非常容易的，即：

window . frames[' frame name ']；

这是指页面中名为frameName的子框架。如果你想引用一个子帧中的一个子帧，根据被引用的帧是窗口对象的属性这一事实，可以实现如下：

window.frames['frameName']。框架[' frame name 2 ']；

这样就引用了第二个子帧，以此类推，就可以引用多层帧了。

2子框架到父框架的引用

每个window对象都有一个parent属性，指示其父框架。如果框架已经是顶级框架，window.parent还指示框架本身。

3兄弟框架间的引用

如果两个帧是同一个帧的子帧，则称为兄弟帧，它们可以通过父帧相互引用。例如，一个页面包括两个子框架：

框架集行数='50%，50% '

frame src=' 1 . html ' name=' frame 1 '/

frame src=' 2 . html ' name=' frame 2 '/

/框架集

可以在帧1中使用以下语句来引用帧2:

self . parent . frames[' frame 2 ']；

4不同层次框架间的互相引用

框架的层次结构是针对顶层框架的。当级别不同时，只要知道自己的级别和另一个框架的级别和名称，就可以很容易地利用框架引用的窗口对象的属性相互访问，比如：

self . parent . frames[' child name ']。框架[' target frame name ']；

5对顶层框架的引用

与parent属性类似，window对象也有一个top属性。它表示对顶级框架的引用，可用于确定框架本身是否是顶级框架，例如：

//判断这个框架是否是顶层框架。

if(self==top){

//dosomething

}

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读