layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层

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

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

如何在在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.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>

原文地址:https://www.cnblogs.com/ybixian/p/9260579.html

时间: 2024-11-06 07:44:03

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

vue组件-#构成组件-父组件向子组件传递数据

组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件. 在 Vue.js 中,父子组件的关系可以总结为 props down, events up . 父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息. 看看它们是怎么工作的.        

总结一下微信小程序中父子兄弟组件传递数据

常规的这种写法就是父组件在向子组件传递数据 子组件向父组件传递数据主要通过监听事件 比如like点赞功能触发了一个like事件 父组件通过绑定like事件来监听 对应事件: 原文地址:https://www.cnblogs.com/rmty/p/10914342.html

Qt 子窗口内嵌到父窗口中(无边框附体show即可)

有时需要把一个子窗口内嵌进入父窗口当中. 我们可以这样做 1.新建一个QWidget 或者QDialog的子类 ClassA(父类为ClassB) 2.在新建类的构造函数中添加设置窗口属性 [cpp] view plaincopyprint? setWindowFlags(Qt::CustomizeWindowHint|Qt::FramelessWindowHint); 关闭默认的窗口标题提示以及没有边框的窗口. 3.在父窗口中调用. [html] view plaincopyprint? Cl

FineUI小技巧(5)向子窗口传值,向父窗口传值(另附24张专业版高清大图)

前言 FineUI中经常会用到启用IFrame的Window控件,这样有助于从物理上进行代码解耦和.IFrame的引入就会涉及传值问题,如何在父窗口和子窗口之间相互传值呢? 向子窗口传值 向子窗口传值只需要把要传递的参数放在页面URL中即可,一般有两种做法: 页面回发,在后台通过C#代码拼接需要的URL(推荐做法,方便!) 页面第一次加载时,即注册需要的URL(如果参数是页面上某输入框的值,则需要在URL中嵌入JavaScript代码) 来看一个例子,分别用上述两种方式实现: 页面的初始显示 点

ASPX 关闭子窗口后自动更新父窗口

Response.Write("<script language:javascript>javascript:window.close();</script>");//关闭窗口后不更新父窗口 Response.Write("<script> window.opener.location= 父窗口.aspx ';window.close(); </script>");//关闭窗口后自动更新父窗口 ASPX 关闭子窗口后自

javascript 跨域子窗口关闭并刷新父窗口

//实现javascript 跨域子窗口关闭并刷新父窗口 function winOpen(url){            var win=window.open(url,'','height=480,width=670,top=300,left=300,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no');              setInterval((function(win){retur

JavaScript特效实例008-关闭弹出的窗口时,刷新父窗口

实例008                  关闭弹出的窗口时,刷新父窗口 实例说明 关闭弹出的窗口时,同时刷新父窗口,一般用来使父窗口获取最新的数据. 技术要点 本实例主要应用window.open()语句打开新窗口,并在新窗口中应用opener属性,该属性返回一个引用,用于指定打开本窗口的窗口对象. 语法: window.opener window.opener.方法 window.opener.属性 功能:返回的是一个窗口对象.opener属性与打开该窗口的父窗口相联系,当访问子窗口中op

VUE中父组件向子组件传递数据 props使用

VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent"> <ul> <li v-for="item in fatherdatas">{{item}}</li> <!--父组件可以访问它自己的数据--> </ul> <child-component></chi

子窗口向父窗口传递数据

父窗口: 子窗口: 点击"Form1"对话框上的"Form2"按钮后弹出"Form2"对话框,在输入框中输入"1111111",关闭对话框"Form2"时将值赋给"Form1"上的输入框中. 实现代码如下: public partial class Form1 : Form { public void SetValue(string sStr) { textBoxX1.Text = sS