使用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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
微信小程序canvas动态时钟
Oct 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中防止SQL注入的最佳解决方法
2013/04/25 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python实现下载文件的三种方法
2017/02/09 Python
Python生成密码库功能示例
2017/05/23 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
临床医师专业个人自我评价
2014/01/08 职场文书
水毁工程实施方案
2014/04/01 职场文书
民事授权委托书范文
2014/08/02 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
整改通知书格式
2015/04/22 职场文书
通知格式
2015/04/27 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js