使用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中的prototype.bind()方法介绍
Apr 04 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
JavaScript 函数的执行过程
May 09 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
详解vue更改头像功能实现
Apr 28 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
ES6中的类(Class)示例详解
Dec 09 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实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
Prototype源码浅析 Number部分
2012/01/16 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python对于requests的封装方法详解
2019/01/03 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python 实现音频叠加的示例
2020/10/29 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
企业厂长岗位职责
2013/12/17 职场文书
《问银河》教学反思
2014/02/19 职场文书
物业消防安全责任书
2014/07/23 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
黄埔军校观后感
2015/06/10 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
python可视化之颜色映射详解
2021/09/15 Python
利用 JavaScript 构建命令行应用
2021/11/17 Javascript