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 相关文章推荐
小议javascript 设计模式 推荐
Oct 28 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
php格式化时间戳
2016/12/17 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
use jscript Create a SQL Server database
2007/06/16 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python爬虫常用的模块分析
2014/08/29 Python
python处理csv数据的方法
2015/03/11 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python 字符串与数字输出方法
2018/07/16 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
零基础学python应该从哪里入手
2020/08/11 Python
如何用python批量调整视频声音
2020/12/22 Python
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
《风娃娃》教学反思
2016/02/18 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
MySQL基础(二)
2021/04/05 MySQL
python pygame入门教程
2021/06/01 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers
5道关于python基础 while循环练习题
2021/11/27 Python
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Python经常使用的一些内置函数
2022/04/11 Python