解决同一页面中两个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 相关文章推荐
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
实时获取Python的print输出流方法
2019/01/07 Python
Python中请不要再用re.compile了
2019/06/30 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Python列表的切片实例讲解
2019/08/20 Python
python 等差数列末项计算方式
2020/05/03 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS