使用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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
axios学习教程全攻略
Mar 26 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python 堆和优先队列的使用详解
2019/03/05 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
pandas数据拼接的实现示例
2020/04/16 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
党校培训思想汇报
2013/12/30 职场文书
关于读书的演讲稿
2014/05/07 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
房产公证书样本
2015/01/23 职场文书
学校远程教育工作总结
2015/08/11 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电