js与jQuery 获取父窗、子窗的iframe


Posted in Javascript onDecember 20, 2013

在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素

js

在父窗口中获取iframe中的元素

1、

格式:window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();

实例:window.frames["ifm"].document.getElementByIdx_x("btnOk").click();

2、

格式:

var obj=document.getElementByIdx_x("iframe的name").contentWindow;

var ifmObj=obj.document.getElementByIdx_x("iframe中控件的ID");

ifmObj.click();

实例:

var obj=document.getElementByIdx_x("ifm").contentWindow;

var ifmObj=obj.document.getElementByIdx_x("btnOk");

ifmObj.click();

在iframe中获取父窗口的元素

格式:window.parent.document.getElementByIdx_x("父窗口的元素ID").click();

实例:window.parent.document.getElementByIdx_x("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();

Javascript 相关文章推荐
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
Nov 09 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
JS将unicode码转中文方法
May 08 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
vue环境搭建简单教程
Nov 07 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
Jan 19 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 #Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 #Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 #Javascript
js获取select选中的option的text示例代码
Dec 19 #Javascript
js 高效去除数组重复元素示例代码
Dec 19 #Javascript
无闪烁更新网页内容JS实现
Dec 19 #Javascript
javascript中字符串的定义示例代码
Dec 19 #Javascript
You might like
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
CI框架附属类用法分析
2018/12/26 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
详解堆的javascript实现方法
2016/11/29 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Django CBV类的用法详解
2019/07/26 Python
python+django+rest框架配置创建方法
2019/08/31 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
最小二乘法及其python实现详解
2020/02/24 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
几个SQL的面试题
2014/03/08 面试题
会计的岗位职责
2014/03/15 职场文书
个人股份合作协议书
2014/10/24 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
婚宴主持词
2015/06/30 职场文书