jquery iframe操作详细解析

2013-10-03  来源:本站原创  分类:jquery  人气:5 

这篇文章主要是对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

}

相关文章
  • jquery iframe操作详细解析 2013-10-03

    这篇文章主要是对jquery中iframe的操作进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id="mainiframe..</iframe> leftiframe中jQuery改变mainiframe的src代码: $("#mainframe",

  • jquery.cookie用法详细解析 2015-04-01

    本篇文章主要是对jquery.cookie的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是浏览器设置为启用cookie). 例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站

  • jquery中的过滤操作详细解析 2014-08-26

    这篇文章主要介绍了jquery中的过滤操作.需要的朋友可以过来参考下,希望对大家有所帮助 1.过滤 Filtering 名称 说明 举例 eq( index ) 获取第N个元素 获取匹配的第二个元素: $("p").eq(1) filter( expr ) 筛选出与指定表达式匹配的元素集合. 保留带有select类的元素: $("p").filter(".selected") filter( fn ) 筛选出与指定函数返回值匹配的元素集合 这个函

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

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

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

    队列结构是从数据运算来分类的,也就是说队列结构具有特殊的运算规则.而从数据的逻辑结构来看,队列结构其实就是一种线性结构.如果从数据的存储结构来进一步划分,队列结构可以分成两类 什么是队列结构 队列结构是从数据运算来分类的,也就是说队列结构具有特殊的运算规则.而从数据的逻辑结构来看,队列结构其实就是一种线性结构.如果从数据的存储结构来进一步划分,队列结构可以分成两类. 顺序队列结构:即使用一组地址连续的内存单元依次保存队列中的数据.在程序中,可以定义一个指定大小的结构数组来作为队列. 链式队列结构

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

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

  • 同域jQuery(跨)iframe操作DOM(实例讲解) 2014-04-02

    本篇文章主要是对同域jQuery(跨)iframe操作DOM进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 frame目前还是比较流行的,许多地方都通过它来实现特殊的情况.比如说传统的上传.select在ie6下.代理.跨域等等.今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面. <iframe src="a.php" id="aa"></iframe> <iframe src=&q

  • 同域jQuery(跨)iframe操作DOM(示例代码) 2014-05-11

    这篇文章主要是对同域jQuery(跨)iframe操作DOM的示例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 frame目前还是比较流行的,许多地方都通过它来实现特殊的情况.比如说传统的上传.select在ie6下.代理.跨域等等.今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面. <iframe src="a.php" id="aa"></iframe> <iframe src=&q

  • MySQL DELETE语法使用详细解析 2013-10-06

    此文章主要讲述的是MySQL DELETE语法的详细解析,以及一些在实际操作中值得我们大家注意的相关事项的描述,以下就是正文的主要内容 以下的文章主要描述的是MySQL DELETE语法的详细解析,首先我们是从单表语法与多表语法的示例开始的,假如你对MySQL DELETE语法的相关内容十分感兴趣的话,你就可以浏览以下的文章对其有个更好的了解. 单表语法: DELETE [LOW_PRIORITY] [QUICK] [IGNORE] FROM tbl_name [WHERE where_defi

  • 对MySQL配置参数 my.ini/my.cnf的详细解析 2014-04-10

    今天我们今天主要向大家描述的是MySQL配置参数 my.ini/my.cnf,以下的文章就是对其实际操作的具体内容的详细解析 以下的文章主要描述的是对MySQL配置参数 my.ini/my.cnf的详细解析,我们主要是以实例演示的方式来对MySQL配置参数 my.ini/my.cnf的实际操作步骤进行说明,以下就是相关内容的具体描述. 1.获取当前配置参数 要优化MySQL配置参数,首先要了解当前的配置参数以及运行情况.使用下列命令可以获得目前服务器使用的配置参数: mysqld ?verbos

  • javascript窗口宽高,鼠标位置,滚动高度(详细解析) 2014-12-10

    javascript窗口宽高,鼠标位置,滚动高度(详细解析).需要的朋友可以过来参考下,希望对大家有所帮助 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文

  • NodeJS使用jQuery选择器操作DOM 2015-04-04

    这篇文章主要介绍了NodeJS使用jQuery选择器操作DOM的相关资料,需要的朋友可以参考下 注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题: Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML:

  • jquery iframe的方法调用和元素访问问题. 2014-09-16

    JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在iframe中调用父页面中定义的方法和变量: parent.method parent.value 第四.

  • jquery iframe control static pages a property .. 2010-06-13

    Following the last word to html using jcob after resolution, there can not set the page size of the problem, and finally fixed the page with the iframe display size, taking into account security issues, iframe's src value of the dynamic page loads. .

  • jquery iframe element method to obtain 2010-11-13

    Collected using Jquery iframe elements obtained several ways: $(document.getElementById('iframeId').contentWindow.document.body).htm() Display the contents of iframe elements in the body. $("#testId", document.frames("iframename").docu

  • JQuery 常用操作代码 2013-11-26

    JQuery 常用操作代码,学习jquery的朋友可以参考下. //遍历option和添加.移除option function changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){

  • jquery下操作HTML控件的实现代码 2013-11-28

    jquery 的操作HTML控件,需要的朋友可以参考下. 操作下拉框[Select] 1. $("#seelctId").append("<option value='"+optionval+"'>"+text+"</option>");//给下拉框增加 一下option选项 (ddlSayTo这是下拉框的ID) $("#seelctId").val(optionval);//选中刚

  • JavaScript框架(iframe)操作总结 2014-02-04

    这篇文章主要介绍了JavaScript框架(iframe)操作,介绍了种情况下的操作方法,需要的朋友可以参考下 框架编程概述 一个 HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的JavaScript变量.调用其他框架内的函数.控制另一个框架中表单的行为等. 框架间的互相引用 一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:

  • 实用框架(iframe)操作代码 2014-03-07

    这篇文章主要介绍了实用框架(iframe)操作代码 ,需要的朋友可以参考下 常用代码: <iframe src="http://www.baidu.com" marginwidth="0" marginheight="0" border="0" scrolling="no" frameborder="0" width="350" height="270

  • jquery DOM操作 基于命令改变页面 2014-04-24

    jquery DOM操作 基于命令改变页面,需要的朋友可以参考下. 操作属性 jQuery提供.attr()方法改变属性值,.removeAttr()方法删除属性 $(document).ready(function(){ $('div.character a').each(function(index){ $(this).attr({ 'rel': 'external', 'id': 'mylink' + index }); }); }); 插入新元素 jQuery提供了两种将元素插入到其它元