【学习】如何用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);
});
});
});
加load后的实例查看
还有一点要注意,如果iframe中没有引入jquery库文件,那么在主页面中引入的库文件,一定在放在iframe之前,放其之后是不起作用的。而如果iframe中也引入了jquery库文件,则主页面中的库文件放在任何位置都可以了。
好了,今天只写这一个小问题吧,关于iframe还有很多麻烦的事情,改天再总结一下其他的。
转载于:https://www.cnblogs.com/xiaoxianweb/p/7691596.html
【学习】如何用jQuery获取iframe中的元素相关推荐
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:win ...
- Jquery获取iframe中的元素
2019独角兽企业重金招聘Python工程师标准>>> iframe与父页面之间相互获取元素的方法: 1.从父页面中获取iframe页面中的元素: 用法: $(window.fram ...
- 获取父窗口元素或者获取iframe中的元素(相同域名下)
jquery方法 在父窗口中获取iframe中的元素 //方法1 $("#iframe的ID").contents().find("iframe中的元素");/ ...
- js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
- js获取iframe中的元素_在 HTML 中包含资源的新思路
作者:scott jehl 翻译:疯狂的技术宅 原文:https://www.filamentgroup.com/lab/html-includes/未经许可严禁转载 注意:这篇文章描述了一种我们仍需 ...
- js中用xpath获取iframe中的元素
最近遇到一个需求,写一个公共的js方法,用xpath获取页面中的元素的值,然后找了一下,发现可以这样获取: function _x(STR_XPATH) {var xresult = document ...
- JQuery获取iframe中window对象的方法-contentWindow
document.getElementsByTagName('iframe')[0].contentWindow 获取到的就是iframe中的window对象. 转载于:https://www.cnb ...
- 使用jquery获取iframe内的元素属性
当需要获取iframe里的内容时需要有几个前提,否则你是获取不到的: 1:当前页面与iframe的src的页面需要在同一个域名下: 2:必须要等iframe里边的页面加载完成才能获取,否则你要获取的标 ...
- 用 jQuery 获取 iframe 父子页面元素
在iframe子页面获取父页面元素 代码如下: $('#Id', parent.document); 在父页面 获取iframe子页面的元素 代码如下: $("#Id",windo ...
最新文章
- javascript实现小九九乘法口诀
- 网页去重||SimHash(高效的文本相似度去重算法)——适合大批量文档的相似度计算
- Oracle数据库之创建和管理表
- EffectiveC++编程的50个建议
- JS本地加密防止嗅探
- Http协议:状态码
- 汇编写java模块_java – maven汇编插件moduleset源指令不包括任何文件,不符合附带的模块...
- 【图像处理】透视变换 Perspective Transformation(含续加部分)
- cssbefore图片大小_我可以在CSS:before /:after伪元素中更改图像的高度吗?
- oracle表数据如何恢复,ORACLE如何恢复被delete的表数据
- linux svn 可视化工具,CentOS 安装SVN以及可视化管理工具iF.SVNAdmin
- 班尼机器人怎么语音_每日一句中话西说巧学英语:“我们今天就到这儿吧。”英语怎么说?...
- JParticles 2.0 发布,打造炫酷的粒子特效
- SQL Server完整性备份说明
- 象棋名手手机版2019最新版_象棋名手
- 瑞友天翼服务器ip地址怎么修改,瑞友天翼6.0版本iphone移动客户端操作手册
- 单区域——OSPF 讲解+配置命令(为了做双机热备实验)
- 使用pem文件进行ssh登录
- PS CS6启动“不能打开暂存盘文件”的解决方法
- 为什么 wait, notify 和 notifyAll 这些方法不在 thread 类里面?
热门文章
- 程序设计教程用c 语言编程,程序设计教程--用C 语言编程
- 亚索全部语音原声mp3_Spring Boot+VUE集成科大讯飞语音在线合成解决方案
- R并行做大数据时间序列分析与bootstrap
- dell服务器r730老自动重启_Dell R730服务器安装windows server 2008 R2蓝屏问题
- opencv4 c++ 提取图片中的白色区域_OpenCV4.5.0 更快的SIFT,更强的数字识别,以及色彩校正、深度融合...
- vue企业门户网站模板_6 个火爆 GitHub 的后台管理模板,快来收藏!
- C语言:用二维字符数组的每行存储键盘输入的字符串,将这些字符串按字典顺序升序排序,输出排序后的结果。
- 数据结构--课程设计(归档)
- 金蝶显示服务器不是有效,金蝶 服务器不是有效的 请重新设置
- mysql innodb monitor_mysql:innodb monitor(show engine innodb status)探秘