使用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 相关文章推荐
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
JS中数据结构之栈
Jan 01 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
jQuery实现本地存储
Dec 22 jQuery
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之第七天
2006/10/09 PHP
基于mysql的bbs设计(五)
2006/10/09 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
PHP微信红包API接口
2015/12/05 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
Python实现的凯撒密码算法示例
2018/04/12 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Python类型转换的魔术方法详解
2020/12/23 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
Python中的 enumerate和zip详情
2022/05/30 Python