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 相关文章推荐
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
简单的分页代码js实现
May 17 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 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安全配置
2006/10/09 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
React优化子组件render的使用
2019/05/12 Javascript
node使用request请求的方法
2019/12/20 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
js实现网页随机验证码
2020/10/19 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python 正则表达式操作指南
2009/05/04 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
社团活动策划书范文
2014/01/09 职场文书
岗位职责怎么写
2014/03/14 职场文书
领导工作表现评语
2015/01/04 职场文书
长城的导游词
2015/01/30 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
中学语文教学反思
2016/02/16 职场文书
2019求职信大礼包
2019/05/15 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis