利用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获取radio选中的值
May 05 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
PHP数组交集的优化代码分析
2011/03/06 PHP
php简单统计中文个数的方法
2016/09/30 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
js实现微博发布小功能
2017/01/12 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python getopt模块使用实例解析
2019/12/18 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
给男朋友的道歉短信
2015/05/12 职场文书
2015大学迎新标语
2015/07/16 职场文书
Mysql中常用的join连接方式
2022/05/11 MySQL
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
Python使用pyecharts控件绘制图表
2022/06/05 Python
MySQL索引失效场景及解决方案
2022/07/23 MySQL