使用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 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
js兼容标准的表格变色效果
Jun 28 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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 小乘法表实现代码
2009/07/16 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
解析php中curl_multi的应用
2013/07/17 PHP
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
js有序数组的连接问题
2013/10/01 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
js闭包学习心得总结
2018/04/17 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
js实现聊天对话框
2020/02/08 Javascript
github配置使用指南
2014/11/18 Python
python映射列表实例分析
2015/01/26 Python
Python实现telnet服务器的方法
2015/07/10 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
OpenCV实现人脸识别
2017/04/07 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python如何修改装饰器中参数
2018/03/20 Python
python中使用print输出中文的方法
2018/07/16 Python
python 元组和列表的区别
2020/12/30 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
大专毕业生简历的自我评价
2013/10/20 职场文书
小学生美德少年事迹
2014/02/02 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2015年调度员工作总结
2015/04/30 职场文书
入党转正申请报告
2015/05/15 职场文书
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js