layer弹出层父子页面事件相互调用方法


Posted in Javascript onAugust 17, 2018

// 父页面

<body>

<a data-url="bbbb.html" id="parentIframe">小小提示层</a>
<input id="shuzhi" />
<button class="but_par">父页面</button>
</body>
<script src="../jquery-1.9.1.min.js"></script>
<script src="layer/layer.js"></script>
<script>
$(function(){
$("#parentIframe").click(function(){
var a = $(this).attr("data-url");
layer.open({
  type: 2,
  content: a,
  success: function(layero, index){
    var body = layer.getChildFrame('body', index);//获取子页面内容
    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
   body.find("#transmit").click();//执行子页面的方法
    body.find('input').val('Hi,我是从父页来的')
    $(".but_par").click(function(){
    alert(222);
    })
  }
}); 
})
})

// 子页面

<body>
<input id="name" value="不满意" />
<button id="transmit">给父层传值</button>
</div>
</body>
<script>
$(function(){
$(document).on("click","#transmit").click(function(){
parent.$("#shuzhi").val($("#name").val());
parent.location.reload(); 刷新父页面
//关闭layer弹出层
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);
})
window.parent.$(".but_par").click();//执行父页面的事件
})
</script>

以上这篇layer弹出层父子页面事件相互调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
javascript操作excel生成报表示例
May 08 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 #Javascript
layer弹出层全屏及关闭方法
Aug 17 #Javascript
vue+iview+less 实现换肤功能
Aug 17 #Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 #Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 #Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 #Javascript
You might like
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现socket端口重定向示例
2014/02/10 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
Python变量和数据类型详解
2017/02/15 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Python pandas用法最全整理
2019/08/04 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
精彩的广告词
2014/03/19 职场文书
《观舞记》教学反思
2014/04/16 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书