iframe中使用jquery进行查找的方法【案例分析】


Posted in Javascript onJune 17, 2016

本文实例讲述了iframe中使用jquery进行查找的方法。分享给大家供大家参考,具体如下:

问题:

今天在公司是给ckeditor添加一个“是否显示”图片标题的功能

难点:

插件的内容很多,功能相当强大,在短时间之内无法通读和理解里面的逻辑关系,而且修改的内容不能破坏插件内部的逻辑关系,不能因为添加一个功能而引入更多的问题,因此只能从局部去解决这个问题

突破口:

知道页面时使用iframe框架插入的html,页面有些初始化的功能是在这里完成的,因此在这里添加这个checkbox组件,然后根据最后的window去寻找自己想要处理的window对象——window.parent.document.body

jQuery(expression, [context])——如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。

下面这个例子就是想在iframe的父窗口中添加组件

$('tr.cke_dialog_ui_hbox', parent.document.body).prepend('<td><input type="checkbox" id="show_img_title" class="cke_dialog_ui_hbox_first">照片标题描述带入日记</td>');

不能在闭包里面去访问动态添加的组件,因为在页面加载的时候就已经运行了闭包里面的东西,但是页面还没有添加ID为kkkk的组件,使用$("#kkkk")得到的值就为空,这样不能实现预期的目的,出现异常的现象,在浏览器中会报脚本错误

如何判断jquery是否查找到符合条件的对象?

if(0==$(".check_show_img_title", parent.document.body).length){
   alert("没有查找到对象");
}else{
  alert("有"+$(".check_show_img_title", parent.document.body).length+"组件符合查询条件");
}

经验之谈:

在页面中动态添加了组件之后,由于刷新页面就恢复了正常初始化的状态,但是如果是局部刷新,可能会添加多个组件,但是如果只需要一个组件,则就是在离开页面的时候删除自己动态添加的组件,这样问题就来了,可能在不同的浏览器中不能删除,这样就会很郁闷,产生出浏览器兼容的问题,既然是这样那么可以换一种思维方式,在某种状态(在标签中添加属性)下就添加,否则就不添加,这样就不用去删除自己添加的组件了,换种方式解决了浏览器兼容的问题

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
Angular2数据绑定详解
Apr 18 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
JavaScript多种图形实现代码实例
Jun 28 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 #Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 #Javascript
jQuery实现区域打印功能代码详解
Jun 17 #Javascript
javascript日期比较方法实例分析
Jun 17 #Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 #Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 #Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
wordpress之js库集合研究介绍
2007/08/17 Javascript
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
vue的for循环使用方法
2019/02/12 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
详解Golang 与python中的字符串反转
2017/07/21 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
会计自我鉴定范文
2013/10/06 职场文书
校三好学生主要事迹
2014/01/11 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
青年教师个人总结
2015/02/11 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫