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来定位
Feb 20 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
react antd实现动态增减表单
Jun 03 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
如何做到多笔资料的同步
2006/10/09 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
详解php协程知识点
2018/09/21 PHP
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python实现处理管道的方法
2015/06/04 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
新书吧创业计划书
2014/01/31 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
从事会计工作年限证明
2015/06/23 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android