解决同一页面中两个iframe互相调用jquery,js函数的方法


Posted in Javascript onDecember 12, 2016

这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法

a.html中有两个iframe,如下:

<iframe width="100%" height="100%" name="left" scrolling="auto" frameborder="0" src="b.html" id="left"></iframe>
<iframe width="100%" height="100%" name="main1" scrolling="auto" frameborder="0" src="c.html" id="main1" ></iframe>

b.html中有一个treeview,称为左菜单iframe

c.html为b.html中treeview点击后显示的数据,就称为右页面iframe。

既然两个页面之间都有关系,存在在a.html中,那这两个页面就能互相调用Js方法。

ps:如果两个页面之间没有一点关系,那就让他们产生关系方能互相调用,比如说两个页面都引用一个js文件,那就能互相调用了。

比如说

c.html中有一个button

<input type="button" id="btn" onclick="btnAlert(i)"/>
<input type="hidden" id="hidVal" name="hidVal" />
function btnAlert(index) {
 $(window.parent.$("#left"))[0].contentWindow.GetIndex(index);//调用b.html中的方法
}

b.html中

function GetIndex(index) { 
 $(window.parent.$("#main1")).contents().find("#hidVal").val(index);//找到c.html中的hidVal给他赋值
 }

最后总结下:

如果是c.html的iframe是在b.html中那么引用下面的方法

1,子iframe内调用父类函数方法:

window.parent.func();

2,子Iframe中获取父界面的元素:

$("#xx", window.parent.document);

这个xx就是父界面中要获取的元素的ID。

3,jquery 调用子iframe页面中js的方法:

 iframefunction()是子页面的方法

$(window.parent.document).contents().find("#iframename")[0].contentWindow.iframefunction();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 #Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 #Javascript
AngularJS封装指令方法详解
Dec 12 #Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 #Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 #Javascript
jQuery Ajax File Upload实例源码
Dec 12 #Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 #Javascript
You might like
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
js面向对象编程总结
2017/02/16 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
python妙用之编码的转换详解
2017/04/21 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
如何教少儿学习Python编程
2020/07/10 Python
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
EJB timer的种类
2014/10/28 面试题
董事长职责范文
2013/11/08 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
甜品店创业计划书
2014/08/14 职场文书
代办出身证明书
2014/10/21 职场文书
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers