layui的父子传值

页面结构

 

 

 

 

 

 

子传父值

1.html(父页面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
    
    <script src="./layui/layui.js "></script>
    <script>
        layui.use( ['layer'], function(){
            var layer = layui.layer //弹层

            // iframe层
            layer.open({
            type: 2,
            // title: 'layer mobile页',
            shadeClose: true,
            // shade: 0.8,
            // area: ['380px', '90%'],
            content: '2.html' //iframe的url
            }); 


            window.gotoHref=function(type){
                if(type == '1'){
                    console.log(1)
                }else if(type == '2'){
                    console.log(2)
                }else if(type == '3'){
                    console.log(3)
                }
            }

            // var _tools = {
            //     func1: function(){
            //     console.log('func1');
            //     }
            // }
            // window.tools = _tools;
    }); 
    </script>
</body>
</html>

2.html（子页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a data-type="1" href="javascript:;">1</a>
    <a data-type="2" href="javascript:;">2</a>
    <a data-type="3" href="javascript:;">3</a>
    <script src="./layui/layui.js"></script>
    <script src="./layui/lay/modules/jquery.js"></script>
    <script src="layui/jquery1.9.0.min.js"></script>
    <script>
        $('a').click(function(){
            var type=$(this).attr('data-type');
            parent.gotoHref(type)
        })

        // parent.tools.func1();
    </script>
</body>
</html>

 父传子值

1.html（父页面）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
    <div class="dv">321</div>
    <script src="./layui/layui.js "></script>
    <script src="./layui/jquery1.9.0.min.js"></script>
    <script>
        layui.use( ['layer'], function(){
            var layer = layui.layer //弹层

            // iframe层
            layer.open({
            type: 2,
            title: '子页面',
            shadeClose: true,
            // shade: 0.8,
            // area: ['380px', '90%'],
            content: '2.html', //iframe的url
            // 3.父传子值
            success:function(layero, index){
                //关键在这，调用子的iframe的方法，进行传参,前两行固定写法
                var body = layer.getChildFrame('body', index);
                var iframeWin = window[layero.find('iframe')[0]['name']];
                var div=$('.dv').text();
                iframeWin.childIframe(div);    //看这
            }
            }); 

            // console.log($('div').text())   //注意这里会打印出多余的弹出层的title2遍

            // 2.子传父值
            // window.gotoHref=function(type){
            //     if(type == '1'){
            //         console.log(1)
            //     }else if(type == '2'){
            //         console.log(2)
            //     }else if(type == '3'){
            //         console.log(3)
            //     }
            // }

            // 1.示例：
            // var _tools = {
            //     func1: function(){
            //     console.log('func1');
            //     }
            // }
            // window.tools = _tools;
    }); 
    </script>
</body>
</html>

 

2.html(子页面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a data-type="1" href="javascript:;">1</a>
    <a data-type="2" href="javascript:;">2</a>
    <a data-type="3" href="javascript:;">3</a>
    <script src="./layui/layui.js"></script>
    <script src="./layui/lay/modules/jquery.js"></script>
    <script src="layui/jquery1.9.0.min.js"></script>
    <script>
        // 3.父传子值
        function childIframe(childNo){ 
            console.log(childNo);
        }

        // 2.子传父值
        // $('a').click(function(){
        //     var type=$(this).attr('data-type');
        //     parent.gotoHref(type)
        // })

        // 1.示例：
        // parent.tools.func1();
    </script>
</body>
</html>

 

posted @ 2020-08-11 16:12  枚齐元子  阅读(1222)  评论(0)  编辑  收藏  举报