使用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 使用个人心得
Feb 26 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
详解Vue Cli浏览器兼容性实践
Jun 08 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分页显示制作详细讲解
2006/12/05 PHP
php单件模式结合命令链模式使用说明
2008/09/07 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Vue中引入样式文件的方法
2017/08/18 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
python处理二进制数据的方法
2015/06/03 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python中sys模块是做什么用的
2020/08/16 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
如何通过python检查文件是否被占用
2020/12/18 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
大学生毕业鉴定
2014/01/31 职场文书
2014年团队工作总结
2014/11/24 职场文书
欠款纠纷起诉状
2015/05/19 职场文书