解决同一页面中两个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 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 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读取xml方法介绍
2013/01/12 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
php验证手机号码
2015/11/11 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python中的heapq模块源码详析
2019/01/08 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
总经理工作职责范文
2014/03/14 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
学生上课说话检讨书
2014/10/25 职场文书
个园导游词
2015/02/04 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
MySQL分区以及建索引的方法总结
2022/04/13 MySQL
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python