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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
mysql limit查询优化分析
2008/11/12 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
win与linux系统中python requests 安装
2016/12/04 Python
python http接口自动化脚本详解
2018/01/02 Python
Python使用wxPython实现计算器
2018/01/30 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
外企测试工程师面试题
2015/02/01 面试题
销售类个人求职信范文
2013/09/25 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
高中英语教学反思范文
2016/03/02 职场文书