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 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
原生JS实现微信通讯录
Jun 18 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判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
原生js开发的日历插件
2017/02/04 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
Vue Promise的axios请求封装详解
2018/08/13 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python交互式图形编程的实现
2019/07/25 Python
Python 音频生成器的实现示例
2019/12/24 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
雷人标语集锦
2014/06/19 职场文书
家长会标语
2014/06/24 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android
Java 多线程协作作业之信号同步
2022/05/11 Java/Android