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 相关文章推荐
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
layui--js控制switch的切换方法
Sep 03 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
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
php中in_array函数用法分析
2014/11/15 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
XML的代替者----JSON
2007/07/21 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
新手简单了解vue
2019/05/29 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python http基本验证方法
2018/12/26 Python
python中正则表达式与模式匹配
2019/05/07 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
欢送退休感言
2014/02/08 职场文书
电子银行营销方案
2014/02/22 职场文书
建材投资建议书
2014/05/16 职场文书
关于旅游的活动方案
2014/08/15 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
涨价通知
2015/04/23 职场文书
党员证明信
2015/06/19 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL