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获取某元素的class里面的css属性值代码
Jan 16 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
PHP多例模式介绍
2013/06/24 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python全局变量用法实例分析
2016/07/19 Python
python实现维吉尼亚加密法
2019/03/20 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python selenium操作cookie的实现
2020/03/18 Python
python用Configobj模块读取配置文件
2020/09/26 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
工程部经理岗位职责
2013/12/08 职场文书
六十岁生日答谢词
2014/01/10 职场文书
3分钟演讲稿
2014/04/30 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
学生会干部任命书
2015/09/21 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis