使用jquery/js获取iframe父子级、同级获取元素的方法


Posted in Javascript onAugust 05, 2016

在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素

js

在父窗口中获取iframe中的元素

1、

格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();

实例:window.frames["ifm"].document.getElementById("btnOk").click();

2、

格式:

var obj=document.getElementById("iframe的name").contentWindow;
var ifmObj=obj.document.getElementById("iframe中控件的ID");
ifmObj.click();

实例:

var obj=document.getElementById("ifm").contentWindow;

var ifmObj=obj.document.getElementById("btnOk");

ifmObj.click();

在iframe中获取父窗口的元素

格式:window.parent.document.getElementById("父窗口的元素ID").click();

实例:window.parent.document.getElementById("btnOk").click();

jquery

在父窗口中获取iframe中的元素

1、

格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1

实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1

2、

格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2

实例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

在iframe中获取父窗口的元素

格式:$('#父窗口中的元素ID', parent.document).click();

实例:$('#btnOk', parent.document).click();

以上这篇使用jquery/js获取iframe父子级、同级获取元素的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
$()JS小技巧
Jul 21 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
javascript Keycode对照表
Oct 24 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 #Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 #Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 #Javascript
js从外部获取图片的实现方法
Aug 05 #Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 #Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 #Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 #Javascript
You might like
php分页函数示例代码分享
2014/02/24 PHP
PDO::exec讲解
2019/01/28 PHP
php中yii框架实例用法
2020/12/22 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
javascript 节点排序 2
2011/01/31 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python selenium 三种等待方式解读
2016/09/15 Python
python中range()与xrange()用法分析
2016/09/21 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
Python extract及contains方法代码实例
2020/09/11 Python
Java基础知识面试要点
2016/07/29 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
马智宇结婚主持词
2014/04/01 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
父亲节活动总结
2015/02/12 职场文书
财务稽核岗位职责
2015/04/13 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
关于远足的感想
2015/08/10 职场文书