layer弹出层父子页面事件相互调用方法

 更新时间:2018年08月17日 11:26:13   作者:qq_36990886  
今天小编就为大家分享一篇layer弹出层父子页面事件相互调用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

// 父页面

<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弹出层父子页面事件相互调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS实现炫酷轮播图

    JS实现炫酷轮播图

    这篇文章主要为大家详细介绍了JS实现炫酷轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS 中使用Promise 实现红绿灯实例代码(demo)

    JS 中使用Promise 实现红绿灯实例代码(demo)

    本文通过实例代码给大家介绍了JS 中使用Promise 实现红绿灯效果,在文中给大家介绍了一个promise用法例子,需要的朋友可以参考下
    2017-10-10
  • js 表格拖拽效果实例代码 (IE only)

    js 表格拖拽效果实例代码 (IE only)

    拖拽交换Table的列(I.E. ONLY)
    2010-02-02
  • 微信小程序3种位置API的使用方法详解

    微信小程序3种位置API的使用方法详解

    这篇文章主要介绍了微信小程序3种位置API的使用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • javascript 闭包详解

    javascript 闭包详解

    闭包:是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。在javascript中没有块级作用域,一般为了给某个函数申明一些只有该函数才能使用的局部变量时,我们就会用到闭包,我们来详细探讨下
    2015-07-07
  • 极力推荐10个短小实用的JavaScript代码段

    极力推荐10个短小实用的JavaScript代码段

    这篇文章主要为大家极力推荐10个短小实用的JavaScript代码段,帮助大家节省大量开发时间,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 原生js与jQuery实现简单的tab切换特效对比

    原生js与jQuery实现简单的tab切换特效对比

    这篇文章主要通过原生js与jQuery实现简单的tab切换特效对比介绍了js与jQuery之间的区别,有需要的小伙伴可以参考下。
    2015-07-07
  • 正则 js分转元带千分符号详解

    正则 js分转元带千分符号详解

    下面小编就为大家带来一篇正则 js分转元带千分符号详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 微信小程序实现渐入渐出动画效果

    微信小程序实现渐入渐出动画效果

    这篇文章主要给大家介绍了关于微信小程序实现渐入渐出动画效果的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JS加载器如何动态加载外部js文件

    JS加载器如何动态加载外部js文件

    这篇文章主要介绍了JS加载器如何动态加载外部js文件的相关资料,需要的朋友可以参考下
    2016-05-05

最新评论