使用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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
jQuery ajax应用总结
Jun 02 Javascript
详解jQuery中的事件
Dec 14 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
javascript canvas API内容整理
Feb 16 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
解决中英文字符串长度问题函数
2007/01/16 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
PHP中PDO的错误处理
2011/09/04 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python下载文件时显示下载进度的方法
2015/04/02 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
工作失职检讨书(精华篇)
2014/10/15 职场文书
导游词之井冈山
2019/11/20 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python