jquery iframe操作详细解析

使用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．父框架到子框架的引用

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

window.frames["frameName"];

这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：

window.frames["frameName"].frames["frameName2"];

这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。

2．子框架到父框架的引用

每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。

3．兄弟框架间的引用

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

<frameset rows="50%,50%">

<frame src="1.html" name="frame1" />

<frame src="2.html" name="frame2" />

</frameset>

在frame1中可以使用如下语句来引用frame2：

self.parent.frames["frame2"];

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

框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：

self.parent.frames["childName"].frames["targetFrameName"];

5．对顶层框架的引用

和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：

//判断本框架是否为顶层框架

if(self==top){

//dosomething

}

赞 (0)

相关推荐

  • JQUERY 获取IFrame中对象及获取其父窗口中对象示例

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 在父窗口中获取iframe中的元素 格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click(); 实例:$("#ifm").contents().find("#btnOk").click(); 在iframe中获取父窗口的元素 格式:$(

  • js与jQuery 获取父窗、子窗的iframe

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click(); 实例:window.frames["ifm"].document.getElementByIdx_x

  • jquery获取iframe中的dom对象(两种方法)

    父窗口中操作iframe:$(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作父窗口:$(window.parent.document) 接下来就可以继续获取iframe内的dom了. 获取iframe内的dom对象有两种方法 1 $(window.frames["iframeChild"].document).find("#child") 2 $(&

  • jquery 操作iframe的几种方法总结

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.document jquery方法:在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text&quo

  • jquery iframe操作详细解析

    使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id="mainiframe..</iframe> leftiframe中jQuery改变mainiframe的src代码: $("#mainframe",parent.document.body).attr("src","http://ww

  • jquery.cookie用法详细解析

    Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是浏览器设置为启用cookie). 例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息? 怎么在js/jquery中操作处理cookie那?今天分享一个cookie操作类--jQ

  • jquery中的过滤操作详细解析

    1.过滤 Filtering 名称 说明 举例 eq( index ) 获取第N个元素 获取匹配的第二个元素: $("p").eq(1) filter( expr ) 筛选出与指定表达式匹配的元素集合. 保留带有select类的元素: $("p").filter(".selected") filter( fn ) 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这

  • C++中栈结构建立与操作详细解析

    C++中栈结构建立与操作详细解析

    什么是栈结构 栈结构是从数据的运算来分类的,也就是说栈结构具有特殊的运算规则,即:后进先出. 我们可以把栈理解成一个大仓库,放在仓库门口(栈顶)的货物会优先被取出,然后再取出里面的货物. 而从数据的逻辑结构来看,栈结构起始就是一种线性结构. 如果从数据的存储结构来进一步划分,栈结构包括两类:顺序栈结构: 即使用一组地址连续的内存单元依次保存栈中的数据.在程序中,可以定义一个指定大小的结构数组来作为栈,序号为0的元素就是栈低,再定义一个变量top保存栈顶的序号即可.链式栈结构: 即使用链表的的形式

  • C++中队列的建立与操作详细解析

    C++中队列的建立与操作详细解析

    什么是队列结构 队列结构是从数据运算来分类的,也就是说队列结构具有特殊的运算规则.而从数据的逻辑结构来看,队列结构其实就是一种线性结构.如果从数据的存储结构来进一步划分,队列结构可以分成两类. 顺序队列结构:即使用一组地址连续的内存单元依次保存队列中的数据.在程序中,可以定义一个指定大小的结构数组来作为队列. 链式队列结构:即使用链表形式保存队列中各元素的值. 在队列结构中允许对两端进行操作,但是两端的操作不同.在表的一端只能进行删除操作,称为队头:在表的另一端只能进行插入操作,称为队尾.如果队

  • C++中对象的赋值与复制操作详细解析

    C++中对象的赋值与复制操作详细解析

    对象的赋值 如果对一个类定义了两个或多个对象,则这些同类的对象之间可以互相赋值,或者说,一个对象的值可以赋给另一个同类的对象.这里所指的对象的值是指对象中所有数据成员的值. 对象之间的赋值也是通过赋值运算符"="进行的.本来赋值运算符"="只能用来对单个的变量赋值,现在被扩展为两个同类对象之间的赋值,这是通过对赋值运算符的重载实现的. 实际上这个过程是通过成员复制来实现的,即将一个对象的成员值一一复制给另外一个对象的成员.对象赋值的一般形式: 对象名1=对象名2;

  • C语言数据结构详细解析二叉树的操作

    C语言数据结构详细解析二叉树的操作

    目录 二叉树分类 二叉树性质 性质的使用 二叉树的遍历 前序遍历 中序遍历 后序遍历 层序遍历 求二叉树的节点数 求二叉树叶子结点个数 求二叉树的最大深度 二叉树的销毁 二叉树分类 满二叉树 除最后一层无任何子节点外,每一层上的所有结点都有两个子结点的二叉树.也可以理解为每一层的结点数都达到最大值的二叉树. 完全二叉树 一棵深度为k的有n个结点的二叉树,对树中的结点按从上至下.从左到右的顺序进行编号,如果编号为i(1≤i≤n)的结点与满二叉树中编号为i的结点在二叉树中的位置相同,则这棵二叉树称为

  • Mysql中复制详细解析

    1.mysql复制概念 指将主数据库的DDL和DML操作通过二进制日志传到复制服务器上,然后在复制服务器上将这些日志文件重新执行,从而使复制服务器和主服务器的数据保持同步.复制过程中一个服务器充当主服务器(master),而一个或多个其它服务器充当从服务器(slaves).主服务器将更新重新写入二进制日志文件,并维护文件的一个索引以跟踪日志循环.这些日志可以记录发送到从服务器的更新.当一个从服务器连接主服务器时,它通知主服务器.从服务器在日志中读取的最后一次成功更新的位置.从服务器接受从那时起发

  • 远程数据库的表超过20个索引的影响详细解析

    昨天同事参加了一个研讨会,有提到一个案例.一个通过dblink查询远端数据库,原来查询很快,但是远端数据库增加了一个索引之后,查询一下子变慢了. 经过分析,发现那个通过dblink的查询语句,查询远端数据库的时候,是走索引的,但是远端数据库添加索引之后,如果索引的个数超过20个,就会忽略第一个建立的索引,如果查询语句恰好用到了第一个建立的索引,被忽略之后,只能走Full Table Scan了. 听了这个案例,我查了一下,在oracle官方文档中,关于Managing a Distributed

  • MySQL DELETE语法使用详细解析

    以下的文章主要描述的是MySQL DELETE语法的详细解析,首先我们是从单表语法与多表语法的示例开始的,假如你对MySQL DELETE语法的相关内容十分感兴趣的话,你就可以浏览以下的文章对其有个更好的了解. 单表语法: 复制代码 代码如下: DELETE [LOW_PRIORITY] [QUICK] [IGNORE] FROM tbl_name   [WHERE where_definition]   [ORDER BY ...]   [LIMIT row_count] 多表语法: 复制代码

随机推荐