【学习】如何用jQuery获取iframe中的元素
(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出。)
说实在的,以前真的很少用到iframe,可最近公司把主要精力放在了研发后台系统上,所以iframe的出场就高了。今天写一个小知识,如何获取iframe中的元素。js原生方法我就不写了,毕竟还是对jquery情有独钟,用到的是contents()方法,请看官方解释:http://www.w3school.com.cn/jquery/traversing_contents.asp
所以说,用contents()是一定能获取到iframe中的元素的,但是必须在同一个域,这里就引出“跨域”的问题,以下是百度出来的知识点:
什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。
详细请查看这篇文章:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
所以呢,我们在主页面去访问iframe中的元素,给其加一个js事件,是不起作用的。写一个最最简单的alert弹出,在页面中,有一个iframe,其src为a.html,在a.html中有一个按钮,class起名btn。在主页面中写上如下js代码:
$(function(){
var btn=$(this).contents().find(".btn");
btn.click(function(){
alert(1);
});
});
这时点击这个按钮,是没有任何反应的(实例请点击查看)。
所以,要修改,给iframe加一个load()即可:
$(function(){
$(".my-iframe").load(function(){
var btn=$(this).contents().find(".btn");
btn.click(function(){
alert(1);
});
});
});
还有一点要注意,如果iframe中没有引入jquery库文件,那么在主页面中引入的库文件,一定在放在iframe之前,放其之后是不起作用的。而如果iframe中也引入了jquery库文件,则主页面中的库文件放在任何位置都可以了。
好了,今天只写这一个小问题吧,关于iframe还有很多麻烦的事情,改天再总结一下其他的。
【学习】如何用jQuery获取iframe中的元素的更多相关文章
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window ...
- Jquery获取iframe中的元素
iframe与父页面之间相互获取元素的方法: 1.从父页面中获取iframe页面中的元素: 用法: $(window.frames["iframe_include_adverse" ...
- js 获取iframe中的元素
今天要修改编辑器插件中的元素遇到的问题 jquery 在父窗口中获取iframe中的元素 1.Js代码 格式:$("#iframe的ID").contents().find(&qu ...
- 父窗口中获取iframe中的元素
js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementById("ifr ...
- 获取父窗口元素或者获取iframe中的元素(相同域名下)
jquery方法 在父窗口中获取iframe中的元素 //方法1 $("#iframe的ID").contents().find("iframe中的元素"); ...
- 使用jquery操作iframe中的元素
使用jquery操作iframe中的元素<iframe src="/test/demo.htm" width="99%" height="300 ...
- 获取iframe中的元素
父窗口中获取iframe中的元素 var ifr = document.getElementById('suggustion').contentWindow.document.body; 在ifram ...
- 在iframe窗体内 获取父级的元素;;在父窗口中获取iframe中的元素
在iframe中获取父窗口的元素 $(‘#父窗口中的元素ID’, parent.document).click(); 在父窗口中获取iframe中的元素 $(“#iframe的ID”).content ...
随机推荐
- 团队作业8——Beta 阶段冲刺7th day
一.当天站立式会议 二.每个人的工作 (1)昨天已完成的工作(具体在表格中) 完善支付功能 (2)今天计划完成的工作(具体如下) 测试与正式发布 (3) 工作中遇到的困难(在表格中) 成员 昨天已完成 ...
- 团队作业4——第一次项目冲刺(Alpha版本)第六天and第七天
团队作业4--第一次项目冲刺(Alpha版本)第六天and第七天 第一次项目冲刺(Alpha版本)第六天 一.Daily Scrum Meeting照片 二.燃尽图 1.解释说明横纵坐标代表的含义 ...
- 201521123051《Java程序设计》第七周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 使用工具:百度脑图 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 ...
- 201521123027 《JAVA程序设计》第五周学习总结
1.本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容 Comparable接口与Comparator接口的区别: Markdown的其他用 ...
- 201521123081《Java程序设计》 第1周学习总结
#1. 本周学习总结 ###JAVA是1995年SUN推出的一种简单的,跨平台的,面向对象的,分布式的,解释的,健壮的,安全的,结构的,中立的,可移植的,性能很优异的,多线程的,动态的语言.是世界上广 ...
- 201521123077 《Java程序设计》第13周学习总结
1. 本周学习总结 1.1以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 介绍的传输层协议 : TCP 可靠:具有失败重传功能 开销较大:需要建立链路 需要维持传输中的关系 ...
- JAVA课程设计--简易计算器(201521123022 黄俊麟)
1.团队课程设计博客链接 http://www.cnblogs.com/I-love-java/p/7058752.html 2.个人负责模板或任务说明 1.初始化业务逻辑. 2.开方.正负.清零.退 ...
- 201521123101 《Java程序设计》第9周学习总结
1. 本周学习总结 2. 书面作业 1. 常用异常,题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 遇到ArrayI ...
- ROS学习记录(四)————怎样建立一个package包?
功能包是什么? 英文表述package,我可没有在炫英文啊,我的英文很烂的,只是在提醒大家,在ROS系统中,这个词使用的频率非常之高,你必须记住它,要不就没法正确的看懂信息.言归正传,package是 ...
- JPA关系映射之one-to-one
一对一关联有两种实现方式:一种是共享的主键关联,另一种是一对一的外键关联 1.共享的主键关联:让两个对象具有共同的主键值,以表明他们之间的一一对应关系. Person.java类 public cla ...