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 在线压缩和格式化收藏
Jan 16 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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
967 个函式
2006/10/09 PHP
php的一些小问题
2010/07/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
php报错502badgateway解决方法
2019/10/11 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
django_orm查询性能优化方法
2018/08/20 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
公积金单位接收函
2014/01/11 职场文书
百年校庆节目主持词
2014/03/27 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
安全月宣传标语
2014/10/07 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
教师学习心得体会范文
2016/01/21 职场文书
《小小的船》教学反思
2016/02/18 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android