jquery里用contentWindow来操作iFrame子框架,如传值,传递对象等[附在线实例演示]推荐 亲测 原创 收藏

文章标签: jquery iframe
  • :
  • 03-31 12:28
  • :
  • 314次
  • :
  • 0条
  • 4赞

简介本文和你分享的是在jquery里,用contentWinidow对象来操作iFrame子框架,实现向框架传值,传对象,子框架里执行传过来的函数等方法,及在线实例演示。l

本文和你分享的是jquery里操作iFrame子框架的另一种方法,以前站长写过一篇jquery里操作iFrame框架的文章,用的是 $("#IFrame").contents() 的方法,大家可以点下面的链接查看:

jquery操作iframe,读取iframe框架内的指定内容,点击iframe框架内的按钮和向iframe框架内添加内容【附完整在线实例】


本文讲的是通过js里的contentWindow对象来操作iFrame子框架的方法,先来了解一下contentWinidow对象:

首先我们要知道的是contentWinidow并不是w3c标准,而属于w3c标准的是另一个对象:contentDocument,虽然如此,但我们用的最多的还是contentWindow,因为contentWindow几乎所有的浏览器都支持[之所以说几乎,是因为站长没能把所有的浏览器都测试一遍],而contentDocument在IE6和IE7里都是不支持的:

1.contentWindow:获取指定窗口的window对象,所有主流浏览器都支持;
2.contentDocument:获取指定窗口的document对象,IE6 IE7不支持;

好了,关于conentWindow和contentDocument就介绍到这里,下面我们来看在jquery里如何具体的使用contentWindow来操作iframe子框架:

第一:jquery里获取指定框架的window对象:

$("#myiFrame")[0].contentWindow;

PS:因为contentWindow是属于JS里的DOM对象,所以我们在jquery里使用的时候,需要先把jquery对象转换为DOM对象,至于转换的方法,大家可以看这篇站长以前写的文章:jquery对象与dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法

第二:jquery里向指定的框架内传值或对象:

$("#myiFrame")[0].contentWindow.data=v;

PS:上面代码里:

data这个参数是我们自定义的,contentWindow获取到的是window对象,而window对象是可读又可写的,所以我们可以任意的自定义一些属性或方法;

v是我们要传的具体的值,可以是具体的一个值,也可以是对象,看下面这个具体的实例:

//首先我们声明一个对象:
var v={};
//然后我们可以给这个对象任意的添加属性或方法:
v.data="爱jQuery  www.aijquery.cn";
v.do=function(v){alert(v);};

//上面对象的属性或方法设置完后,就用下面这句把对象传入到iframe框架里:
$("#myiFrame")[0].contentWindow.data=v;

第三:iframe框架里获取父框架传来的值或对象:

var v=window.data;

PS:在父框架里,我们把要传的值或对象放在window对象里,那么我们要读取的时候,就和读取普通对象的方法一样。

第四:父框架内直接操作iframe框架内的标签:

//读取iframe框架内文本框的值:
$("#myiFrame")[0].contentWindow.$("#id").val();
//读取iframe框架内指定ID的标签的html内容:
$("#myiFrame")[0].contentWindow.$("#id").html();

好了,关于jquery里用contentWindow来操作iframe子框架就介绍到这里了,和以前一样,下面是站长准备的在线实例:

jquery里用contentWindow操作iFrame的实例演示

下面是上面实例的截图:



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 14:34:04