使用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 相关文章推荐
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
vue实现前端列表多条件筛选
Oct 26 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php中rename函数用法分析
2014/11/15 PHP
php实现的mongodb操作类
2015/05/28 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python能做什么
2020/06/02 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
物理力学求职信
2014/02/18 职场文书
法制宣传实施方案
2014/03/13 职场文书
法律系毕业生求职信
2014/05/28 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
秋季运动会开幕词
2015/01/28 职场文书
教师节主题班会教案
2015/08/17 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书