使用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实现简单的二级联动
Mar 19 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
Jun 17 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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内核探索之变量
2015/12/22 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
MSN消息提示类
2006/09/05 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
ES6入门教程之let和const命令详解
2017/05/17 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python实现的系统实用log类实例
2015/06/30 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
用python制作个音乐下载器
2021/01/30 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
个人党性分析材料
2014/12/19 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
大学新生入学感想
2015/08/07 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python