最近做一个项目的需要多个弹层,每个弹层中还需要数据传递,

经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法

大概如图,看图自己应该明白

如何在在b页面选择好的值传给a页面的问题,这个问题我百度了好久都没有解决

后来参考了文档

http://fuxiao.io/practice/docs/#/layui/layer/iframes

加上自己理会,终于解决问题了,这个文档看了好几次还是不太明白(个人理解能力差),后来加班自己边动手边理解,解决问题了

上代码

主页面(top.html)的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>top</title>

    <style>

        .top{

            margin-left: 100px;

            margin-top: 100px;

        }

    </style>

</head>

<body>

    <div class="top">

        <h1>我是top页面</h1>

        <button class="new-add">点我弹出a页面</button>

    </div>

<script src="../assets/scripts/jquery.min.js"></script>

<script src="../js/plugins/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>

<script>

</script>

<script type="text/javascript">

    var layerFrameConfig = {};// 在主页面上定义变量,保存每个弹层的layero,和index

    $('.new-add').on('click',function () {

        var url = 'http://localhost:63342/test-webapp/test2/a.html?_ijt=788n4ijd8brnpou9iu6s365hom'

        parent.layer.open({

            type: 2,

            title: '我是a页面',

            isOutAnim:false,

            area: ['660px','480px'],

            content: [url],

            success: function(layero, index){

                // 把a页面的layero和index保存到top页面中的layerFrameConfig变量中

                // 在b页面就可以通过 top.layerFrameConfig 等获取a页面的windown对象

                // 如果不是在主页面,要加top 才能获取layerFrameConfig , 如: top.layerFrameConfig

                layerFrameConfig.iframeA = {

                    layer_index: index,

                    layer_layero: layero

                }

            }

        })

    })

</script>

</body>

</html>

a 页面的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>a</title>

    <style>

        .a{

            padding: 20px;

        }

    </style>

</head>

<body>

<div class="a">

    <button class="new-add">我是a页面</button>

    <h1>我是通过top页面打开的弹层a子页面</h1>

    <input id="inputa" type="text" value="a">

</div>

<script src="../assets/scripts/jquery.min.js"></script>

<script src="../js/plugins/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>

<!-- 对应JS -->

<script>

</script>

<script type="text/javascript">

    $('.new-add').on('click',function () {

        var url = 'http://localhost:63342/test-webapp/test2/b.html?_ijt=788n4ijd8brnpou9iu6s365hom'

        parent.layer.open({

            type: 2,

            isOutAnim:false,

            title: '我是b页面',

            area: ['660px','480px'],

            content: [url],

            success: function(layero, index){

                // 把b页面的layero和index保存到top页面中的layerFrameConfig变量中

//                top.layerFrameConfig.iframeB = {

//                    layer_index: index,

//                    layer_layero: layero

//                }

            }

        })

    })

</script>

</body>

</html>

b页面的代码



<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>b</title>

    <style>

        .b{

            padding: 20px;

        }

    </style>

</head>

<body>

<div class="b">

    <h2>把值传给第a页面的input,也就是相对于来说b的父页面</h2>

    <button class="save">点我传值给父页面(a页面)的input框</button>

    <h4>我是通过弹层a子页面点击弹出来的页面</h4>

</div>

<script src="../assets/scripts/jquery.min.js"></script>

<script src="../js/plugins/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>

<!-- 对应JS -->

<script>

</script>

<script type="text/javascript">

    // 此段代码处于 iframeB 页面中

   var lfc = top.layerFrameConfig;

   var iframeAIndex = lfc.iframeA.layer_index;

   var iframeALayero = lfc.iframeA.layer_layero;

//   console.log(iframeAIndex)

//   console.log(iframeALayero)

   var iframeAWin = top[iframeALayero.find('iframe')[0]['name']];

   var index = parent.layer.getFrameIndex(window.name); // 获取当前的index

   $('.save').click(function () {

       iframeAWin.$('#inputa').val('我是B(子)页面传来的值');

       parent.layer.close(index);

   });

</script>

</body>

</html>

layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层的更多相关文章

  1. vue 子组件传递数据跟父组件

    子组件 <body> <div v-on:click="test"></div> <script> export default { ...

  2. vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  3. Vue子组件传递数据给父组件

    子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...

  4. vue $emit $on 从子组件传递数据给父组件

    原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...

  5. Silverlight子窗口(ChildWindow)传递参数到父窗口演示

    在企业级项目中,子窗口(ChildWindow)是一个常用控件,其展示方式是以弹出窗口来显示信息. 这里我将演示,子窗口传递参数到父窗口的方法.由于我的开发环境都是英文环境,所以部分中文可能显示不正常 ...

  6. vuejs动态组件给子组件传递数据

    vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...

  7. vue 父向子组件传递数据，子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  8. Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  9. Qt 子窗口内嵌到父窗口中（无边框附体show即可）good

    有时需要把一个子窗口内嵌进入父窗口当中. 我们可以这样做 1.新建一个QWidget 或者QDialog的子类 ClassA(父类为ClassB) 2.在新建类的构造函数中添加设置窗口属性 setWi ...

随机推荐

  1. java.sql.SQLSyntaxErrorException: ORA-00923: 未找到要求的 FROM 关键字

    ssm(Oracle)配置druid数据库连接池,正常启动项目,但是请求访问数据库时报错 “java.sql.SQLSyntaxErrorException: ORA-00923: 未找到要求的 FR ...

  2. body标签中的相关标签

    一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...

  3. [开发技巧]·TopN指标计算方法

    [开发技巧]·TopN指标计算方法 ​ 1.概念介绍 在图片分类的中经常可以看到Top-1,Top-5等TopN准确率(或者时错误率). 那这个TopN是什么意思呢?首先Top-1准确率最好理解,就是 ...

  4. 深入理解java：2.3.6. 并发编程concurrent包 之管理类---线程池

    我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因为频繁 ...

  5. Linux进程后台执行nohup（OpenTSDB后台运行方法）

    1.问题描述 OpenTSDB执行./tsdb tsd启动之后,占有控制台执行并且Ctrl+C后就退出了,关闭控制台同样会退出. 2.解决方法(在/opt/module/opentsdb-2.3.1/ ...

  6. 迭代器与iterable

    迭代器与iterable 最近在学习ES6,有两个概念一直纠缠不清,就是迭代器与iterable,查阅了一些资料,简单来说迭代器就是包含next方法的对象,而iterable是包含可以在其值上迭代的迭 ...

  7. ORACLE 使用通配符进行字符串截取

    ORACLE 使用通配符进行字符串截取 select regexp_substr('aa--a(1-23),b---b(32---1)','[^(,)]+',1,1) as col1, regexp_ ...

  8. 【6.18校内test】T1多项式输出

    日常题前废话: 首先so amazing 的一件事,因为在洛谷上立下了的flag,然后这次考试前两道题都是刚刚做过不久的题emmm(相当于白送200吗qwq,但是这阻挡不了我第三题不会的脚步qwq) ...

  9. Centos7 用gogs搭建git仓库

    0.安装步骤 先安装依赖,然后创建数据库,创建git用户,安装Gogs软件,设置启动,访问web界面进行配置 一.Gogs依赖环境 安装Gogs之前需要配置相应的依赖环境,官网介绍的依赖环境如下: 数 ...

  10. Redis安装遇到的坑 stdlib.h: No such file or directory

    我使用的是ubuntu,本来这几天失业,心情不是很好,准备复习一下新的知识,可是自己在安装redis的过程中遇到了很多的问题. 或许自己很菜. 废话不多说,说一下我遇到的一个大坑. root@ufiv ...