文档章节

jQuery控制IFRAME父窗口元素

疯狂的艺术家
 疯狂的艺术家
发布于 2011/04/01 13:34
字数 294
阅读 7984
收藏 2

DOM方法:

父窗口操作IFRAME:window.frames["iframeSon"].document

IFRAME操作父窗口: window.parent.document

jquery方法:

在父窗口中操作 选中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>

细心的朋友一下就能理解,原理其实很简单,就是用到了$(DOM对象)转换成jquery对象。

例子:

主页面

<title>主页面</title>
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showSubValue(){
//var v = window.frames[0].document.getElementById("subdiv1").innerHTML;
//alert(v);

var o = $(window.frames[0].document).find(":div#subdiv1");
alert(o.html());
}
</script>
</head>

<body>
<div id="mainDiv">主页面测试数据</div>
<input type="button" value="查看子页面数据" onclick="showSubValue();"/>
<iframe src="sub.html" width="300" height="300"></iframe>
</body> 
</html>

子页面:

<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<title>子页面</title>
<script type="text/javascript">
function showMainValue(){

//dom方式
//var v = window.parent.document.getElementById("mainDiv").innerHTML;
//alert(v);

//window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据";


//jquery方式
var o = $(window.parent.document).find(":div#mainDiv");
alert(o.html());
}
</script>
</head>

<body>
<div id="subdiv1">子页面测试数据</div>
<input type="button" value="显示父页面数据" onclick="showMainValue();"/>
</body>
</html>

© 著作权归作者所有

疯狂的艺术家

疯狂的艺术家

粉丝 194
博文 241
码字总数 124216
作品 0
海淀
技术主管
私信 提问
加载中

评论(1)

爱江枫
爱江枫
thank you so much! you are a lifesaver!!:)
jquery iframe父子框架中的元素访问方法

jquery教程 在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1、 格式:window.frames...

yangxiaoxiao
2014/08/07
187
0
解析Jquery取得iframe中元素的几种方法

DOM方法: 父窗口操作IFRAME: window.frames["iframeSon"].document IFRAME操作父窗口: window.parent.document jquery方法: 在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames[......

文文1
2015/03/26
15K
0
iframe多层嵌套时获取元素总结

父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; (嵌套三层,或者更多时) $('iframe').contents().find('iframe').contents().find(......

sjzmlb
2015/06/30
4.4K
0
jQuery在iframe工作不正常

以上代码是以iframe的形式被载入到文档中(父文档称parent,此文档称iframe)。因为用了个jquery 的插件弹出窗口是用iframe的形式载入的。 现在的情况是,事件绑定正常,但是点击按钮后,选择器...

leetom
2011/10/10
3.1K
5
非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗
2015/11/09
119
0

没有更多内容

加载失败,请刷新页面

加载更多

用 4G 工作是什么体验

七月开始,因为工作原因,在公司附近租了个住处,方便工作。离公司近了,感觉就是不一样,之前每天 5:30 就要起床赶地铁,现在可以睡到自然醒,一看才 7 点,悠闲的起床洗漱,踱步到公司,都...

zzxworld
53分钟前
5
0
sonar报错volatile

问题发生 原先代码如下: //认证授权码private static volatile String AUTHORIZATION_CODE = "init"; git push 之后,sonar认为这是个bug检测报告截图如下: 分析排查 解释说明: Markin...

开源小菜鸟2333
58分钟前
4
0
《Java实践指南》--读后

闲读《Java实践指南》... 1.lvy 某些项目中能够看到ivy.xml。早期使用ant的项目中,常常用ivy.xml来下载项目依赖。 2.ant 作为java程序员,应该都知道ant,虽然可能用过的人不多。为什么ant...

RippleChan
59分钟前
4
0
前端:固定表格(table)表头的实现方式

在写插件 bootstrap table 的时候,当数据过多的时候,需要对表格的 thead 进行固定,然后滚动表格的 tbody 。但是在实际的操作上,花了很多的时间在这个问题上,到现在也没有找到完美的解决...

前端老手
今天
6
0
第五章 spring-connet之AnnotationConfigUtils

前言 AnnotatedBeanDefinitionReader是AnnctionConfig相关上下文与AnnotationConfigUtils的桥梁。还有一个作用是解析class成为BeanDefinitionHolder,注册到容器里面。AnnotationConfigUtils...

鸟菜啊
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部