jQuery控制iframe框架内元素
用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>
使用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")
在iframe子页面获取父页面元素
代码如下:
$('#objId', parent.document);
// 搞定...
在父页面 获取iframe子页面的元素
代码如下:
$("#objid",document.frames('iframename').document)
$(document.getElementById('iframeId').contentWindow.document.body).html()
显示iframe中body元素的内容。
$("#testId", document.frames("iframename").document).html();
根据iframename取得其中ID为"testId"元素
$(window.frames["iframeName"].document).find("#testId").html()
用JS或jQuery访问页面内的iframe,兼容IE/FF
注意:框架内的页面是不能跨域的!
假设有两个页面,在相同域下.
index.html 文件内含有一个iframe:
XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面首页</title>
</head>
<body>
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>
</body>
</html>
iframe.html 内容:
XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>iframe.html</title>
</head>
<body>
<div id="test">www.koyoz.com</div>
</body>
</html>
1. 在index.html执行JS直接访问:
JavaScript代码
document.getElementById('koyoz').contentWindow.document.getElementById
('test').style.color='red'
通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的
对象,并将其颜色设置为红色.
此代码已经测试通过,能支持IE/firefox .
2. 在index.html里面借助jQuery访问:
JavaScript代码
$("#koyoz").contents().find("#test").css('color','red');
此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.
收集网上的一些示例：
用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了
1. 在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");
2. 在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input:radio").attr("checked","true");
父窗口想获得IFrame中的Iframe，就再加一个frames子级就行了，如：
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");
jQuery控制iframe框架内元素的更多相关文章
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- 使用jquery操作iframe中的元素
使用jquery操作iframe中的元素<iframe src="/test/demo.htm" width="99%" height="300 ...
- jqueryIFrame框架内元素操作
//获取框架内元素 $(document.getElementById('main').contentWindow.document.body).find("#txtRD_Num" ...
- jquery查找frameset框架内iframe的元素
老系统还幸存有过时的frameset框架,维护升级工作需要对其内部的iframe中的元素进行相关操作.使用jquery查找子iframe页面内的元素时,总找不到目标元素.后来发现少了contents ...
- javascript_获取iframe框架中元素节点的属性值
1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window ...
- JQuery调用iframe父页面元素与方法
JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...
- Jquery获取iframe中的元素
iframe与父页面之间相互获取元素的方法: 1.从父页面中获取iframe页面中的元素: 用法: $(window.frames["iframe_include_adverse" ...
- 【学习】如何用jQuery获取iframe中的元素
(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 说实在的,以前真的很少 ...
随机推荐
- Webstorm2018破解笔记
参考链接: (1)https://www.jb51.net/softs/598714.html 过程步骤 (2)http://idea.lanyus.com/ IntelliJ IDEA 注册 ...
- react之本地图片引用
react之本地图片引用 <img src="../images/photo.png"/> 这种写法在react中是不支持的,所以引用本地图片需要用import或者re ...
- 教你看懂Code128条形码
首 页 条码控件 条码技术 条码新闻 合作伙伴 联系我们 常见问题 电话:010-84827961 当前位置:条形码控件网 > 条形码控件技术文章 > >正文 教你看懂C ...
- python 监控windows磁盘空间和备份大小
#!/usr/bin/env python # Version = 3.5.2 # __auth__ = '无名小妖' import os import time import sendmail im ...
- [iOS]隐藏导航栏把右滑退出操作保留
项目因为用到上面导航栏样式多变,就隐藏了导航栏自己用View代替了,但手势却不见了,后来发现问题解决.操作如下: 千万不要取消 Shows Navigation Bar 这个选项否则手势会消失 应该是 ...
- Logging模块总结 2018/5/30
日志的级别 Level 用处 数字级别 DEBUG 详细的信息,在调试过程中用于诊断错误 10 INFO 用于确认事件正在运行 20 WARNING 意外发生时予以提醒,或者预测一些未来可能发生的一些 ...
- jsp table td自动换行
<TABLE style="word-wrap: break-word; word-break: break-all;">
- Blending
[Blending] Blending is used to make transparent objects. When graphics are rendered, after all shade ...
- 【LA2238 训练指南】固定分区内存管理 【二分图最佳完美匹配，费用流】
题意 早期的多程序操作系统常把所有的可用内存划分为一些大小固定的区域,不同的区域一般大小不同,而所有区域的大小之和为可用内存的大小.给定一些程序,操作系统需要给每个程序分配一个区域,使得他们可以同时执 ...
- Python——字典与字典方法
字典是一种通过名字或者关键字引用的得数据结构,其键可以是数字.字符串.元组,这种结构类型也称之为映射.字典类型是Python中唯一內建的映射类型,基本的操作包括如下: (1)len():返回字典中键— ...