利用JQuery操作iframe父页面、子页面的元素和方法汇总


Posted in jQuery onSeptember 10, 2017

前言

iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,本文主要给大家分享了关于简单使用JQUERY来操作IFRAME的一些记录,这个使用纯JS也可以实现。下面话不多说了,来一起看看详细的介绍吧。

第一、在iframe中查找父页面元素的方法:

$('#id', window.parent.document)

第二、在父页面中获取iframe中的元素方法:

$(this).contents().find("#suggestBox")

第三、在iframe中调用父页面中定义的方法和变量:

parent.method parent.value

JQUERY、JS调用IFRAME父窗口与子窗口元素的方法

1. jquery 在iframe子页面获取父页面元素代码如下:

$("#objid", parent.document)

2. jquery在父页面 获取iframe子页面的元素 代码如下:

$("#objid",document.frames('iframename').document)

3.js 在iframe子页面获取父页面元素代码如下:

indow.parent.document.getElementByIdx_x("元素id");

4.js 在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("元素id");

5.子类iframe内调用父类函数:

window.parent.func();

更多关于jquery操作iframe的技巧请大家关注这里:https://3water.com/Special/822.htm

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 #jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 #jQuery
jQuery实现的弹幕效果完整实例
Sep 06 #jQuery
You might like
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php Static关键字实用方法
2010/06/04 PHP
php上传文件的增强函数
2010/07/21 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
js结合正则实现国内手机号段校验
2015/06/19 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
电钳专业个人求职信
2014/01/04 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python