使用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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
jquery创建div 实现代码
Apr 27 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
Vue动态组件和异步组件原理详解
May 06 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
基于vue实现分页效果
2017/11/06 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
深圳茁壮笔试题
2015/05/28 面试题
酒店管理自荐信
2013/10/23 职场文书
毕业生的自我鉴定
2013/10/29 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
三方合作协议书范本
2014/04/18 职场文书
户籍证明模板
2014/09/28 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
检讨书范文
2019/04/16 职场文书