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 相关文章推荐
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
JSON语法五大要素图文介绍
2012/12/04 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
35个Python编程小技巧
2014/04/01 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python的faker库用法
2019/11/28 Python
python实现加密的方式总结
2020/01/19 Python
如何在django中实现分页功能
2020/04/22 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
办公室文书岗位职责
2013/12/16 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL