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 相关文章推荐
js保存当前路径(cookies记录)
Dec 14 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
详解http访问解析流程原理
Oct 18 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
vue使用video插件vue-video-player的示例
Oct 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
PHP将XML转数组过程详解
2013/11/13 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
Python连接DB2数据库
2016/08/27 Python
打包发布Python模块的方法详解
2016/09/18 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
ORACLE十问
2015/04/20 面试题
行政部主管岗位职责
2013/12/28 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
文化活动实施方案
2014/03/28 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang