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 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
对node.js中render和send的用法详解
May 14 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
ECMAScript 基础知识
2007/06/29 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
python模块内置属性概念及实例
2021/02/18 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
UNIX文件类型
2013/08/29 面试题
开会迟到检讨书
2014/01/08 职场文书
对标管理实施方案
2014/03/12 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
绿里奇迹观后感
2015/06/15 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
五年级作文之学校的四季
2019/12/05 职场文书