解决同一页面中两个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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
浅谈javascript的分号的使用
May 12 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
JS+CSS实现3D切割轮播图
Mar 21 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的变量总结 新手推荐
2011/04/18 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
js实现数组转换成json
2015/06/26 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python 互换字典的键值对实例
2019/02/12 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
优秀团支部申报材料
2014/12/26 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
高中物理教学反思
2016/02/19 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书