使用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 相关文章推荐
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
JS打印组合功能
Aug 04 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 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面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JS重载实现方法分析
2016/12/16 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
js中的闭包实例展示
2018/11/01 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
python实现ipsec开权限实例
2014/11/11 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
django认证系统 Authentication使用详解
2019/07/22 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
详解python的super()的作用和原理
2020/10/29 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
什么是测试驱动开发(TDD)
2012/02/15 面试题
网络程序员自荐信
2014/01/25 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
绩效考核实施方案
2014/03/18 职场文书
爱国演讲稿400字
2014/05/07 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL