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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
Vue实现简单的拖拽效果
Aug 25 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中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
JavaScript 创建对象
2009/07/17 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python使用剪切板的方法
2017/06/06 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
Python shutil模块用法实例分析
2019/10/02 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
毕业自我鉴定范文
2013/11/06 职场文书
法学毕业生自荐信
2013/11/13 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
感恩教育月活动总结
2014/07/07 职场文书
公司离职证明标准样本
2014/10/05 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
python如何进行基准测试
2021/04/26 Python
Python爬虫实战之爬取携程评论
2021/06/02 Python
Anaconda配置各版本Pytorch的实现
2021/08/07 Python