怎么在iframe获取父页面元素中获取iframe获取父页面元素外的元素

46383人阅读
jquery(15)
在iframe子页面获取父页面元素
&代码如下:
$.('#objld', parent.document);
在父页面获取iframe子页面的元素
&代码如下:
$(&#objid&, document.iframes('iframe').document)
&代码如下:
$(document.getElementById('iframeId').contentWindow.document.body).html() $(document.getElementById('iframeId').contentWindow.document.body).html()
显示iframe中body元素的内容
&代码如下:
$(&#testId&, document.frames(&iframename&).document).html()
(1)父页面获取iframe中的元素值:
1.//根据iframe的id获取对象&&
2.var i1 = window.frames['iframeId'];&&
3.//var iframe =window.frames[0];也可以&&
4.//获取iframe中的元素值&&
5.var val=i1.document.getElementById(&t1&).value&
//根据iframe的id获取对象
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//获取iframe中的元素值
var val=i1.document.getElementById(&t1&).value
(2)在iframe中获取父页面中的元素值:
1.var val = parent.document.getElementById(&txt1&);&&
var val = parent.document.getElementById(&txt1&);
(3)a包含2个iframe分别为b,c,现在从b中获取c中的元素的值:
1.var i1 = parent.window.frames['iframeId'];&&
2.var val = i1.document.getElementById(&text1&).&
var i1 = parent.window.frames['iframeId'];
var val = i1.document.getElementById(&text1&).
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:451928次
积分:4216
积分:4216
排名:第6193名
原创:65篇
转载:80篇
评论:39条
(1)(1)(1)(1)(2)(3)(1)(1)(2)(5)(7)(4)(2)(1)(6)(8)(4)(2)(10)(9)(5)(26)(4)(1)(1)(4)(4)(5)(2)(1)(2)(2)(14)(3)解析Jquery取得iframe中元素的几种方法
字体:[ ] 类型:转载 时间:
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下
DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjquery方法:在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text");在IFRAME中操作 选中父窗口中的所有输入框:$(window.parent.document).find(":text");iframe框架的HTML:&iframe src="test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"&&/iframe&
1.在父窗口中操作 选中IFRAME中的所有单选钮$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2.在IFRAME中操作 选中父窗口中的所有单选钮$(window.parent.document).find("input[@type='radio']").attr("checked","true");iframe框架的:&iframe src="test.html" id="iframe1″ width="700″ height="300″ frameborder="0″ scrolling="auto"&&/iframe& 代码如下:&HTML xmlns="http://www.w3.org/1999/xhtml"&&&&&& &&HEAD&&&&&& &&&& &MCE:SCRIPT 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").contents().find("body").append("I'm in an iframe!");&&&&&& &&&&&&&&&&&& //$(window.frames["iframe1"].document).find("input[@type='text']").attr("size","30px");&&&&& &&&&&&&&&&&& //$("#iframe1").contents().find("#d1").css('color','red');&&&&& &&&&&&&&&&&& //$(window.frames["iframe1"].document).find("input[@name='t1']").css({background:"#369"});&&&&& &&&&&&&&&&&& //$("#iframe1").src("test.html");&&&&& &&&&&&&& });&&&&& &// --&&/MCE:SCRIPT&&&&&& &&DIV&&&&&& &&INPUT id=t1&&&&&& &&IFRAME id=iframe1 src="child.htm" mce_src="child.htm"&&/IFRAME&&&&&& &&IFRAME height=100 src="child.htm" width=300 mce_src="child.htm"&&/IFRAME&&&&&& &&/DIV&&&&&& &&DIV&&&&&& &&/DIV&&&&&& 收集利用Jquery取得iframe中元素的几种方法 : 代码如下:$(document.getElementById('iframeId').contentWindow.document.body).htm()& 显示iframe中body元素的内容。 代码如下:$("#testId", document.frames("iframename").document).html();根据iframename取得其中ID为"testId"元素 代码如下:$(window.frames["iframeName"].document).find("#testId").html()作用同上收集网上的一些示例:用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了
1.在父窗口中操作 选中IFRAME中的所有单选钮$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2.在IFRAME中操作 选中父窗口中的所有单选钮$(window.parent.document).find("input[@type='radio']").attr("checked","true");iframe框架的:&iframe src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"&&/iframe&IE7中测试通过使用jquery操作iframe 1、 内容里有两个ifame &iframe id="leftiframe"...&/iframe& &iframe id="mainiframe..&/iframe&leftiframe中jQuery改变mainiframe的src代码: $("#mainframe",parent.document.body).attr("src","http://www.jb51.net")
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 }
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具2013年3月 Web 开发大版内专家分月排行榜第三
2013年3月 Web 开发大版内专家分月排行榜第三
2013年3月 Web 开发大版内专家分月排行榜第三
2013年3月 Web 开发大版内专家分月排行榜第三
2013年3月 Web 开发大版内专家分月排行榜第三
2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
2013年3月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。在父窗口中获取iframe中的元素
格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();&&
实例:window.frames["ifm"].document.getElementById("btnOk").click();&&
Java代码&&
var&obj=document.getElementById("iframe的name").contentW&&
var&ifmObj=obj.document.getElementById("iframe中控件的ID");&&
ifmObj.click();&&
var&obj=document.getElementById("ifm").contentW&&
var&ifmObj=obj.document.getElementById("btnOk");&&
ifmObj.click();&&
&在iframe中获取父窗口的元素
格式:window.parent.document.getElementById("父窗口的元素ID").click();&&
实例:window.parent.document.getElementById("btnOk").click();&&
在父窗口中获取iframe中的元素
格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();
实例:$("#ifm").contents().find("#btnOk").click();
格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();
实例:$("#btnOk",document.frames("ifm").document).click();
&在iframe中获取父窗口的元素
格式:$('#父窗口中的元素ID',&parent.document).click();&&
实例:$('#btnOk',&parent.document).click();&&
阅读(...) 评论()}

我要回帖

更多关于 获取iframe外面的元素 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信