使用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扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
手把手带你封装一个vue component第三方库
Feb 14 Javascript
validform表单验证的实现方法
Mar 08 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
extjs图形绘制之饼图实现方法分析
Mar 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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
javascript整除实现代码
2010/11/23 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
零基础学Python(一)Python环境安装
2014/08/20 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python之字典对象的几种创建方法
2020/09/30 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书