首页 > 其他分享 >layui父子间传值

layui父子间传值

时间:2022-08-18 17:46:25浏览次数:86  
标签:function layer console log layui 父子 var type 传值

原文地址:https://www.cnblogs.com/meiqiyuanzi/p/13476296.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>
    <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>

  

标签:function,layer,console,log,layui,父子,var,type,传值
From: https://www.cnblogs.com/xi-li/p/16599524.html

相关文章

  • layui数据表格的渲染方式--方法渲染
    layui数据表格的方法渲染html代码<tableclass="layui-table"id="test"lay-filter="test"></table> js代码<scripttype="text/javascript">......
  • Angular父子组件传值
    Angulr Core内置的@input @output方法可以完成父子组件之间的传值。配置子组件要使用 @Input() 装饰器,首先要导入 Input,然后用 @Input() 装饰该属性。后面用 @O......
  • JSP和servlet之间的相互传值
    1.从一个jsp页面跳转到另一个jsp页面时的参数传递(1)使用request对象获取客户端提交的信息login.jsp页面代码如下:点击查看代码<%@pagelanguage="java"import="java......
  • 前后端传值总结
    先讲下后端给前端传值,也就是controller跳到html页面时,向html传值的过程,一般2种方法。1.用Model//举个例子@RequestMapping("/toAgentInput")publicStringtoA......
  • layui解决表头固定
    .table-header-fixed{top:0;position:fixed;z-index:9999999;}letheaderTop=$('.layui-table-header').offset().top;//获取表格头到文档顶部的距离$(window).......
  • Vue Router与Vue组件传值
    实战使用Vue.js创建一个具有2个页面的应用,要求:有两个页面:首页和二级页运行项目后默认进入首页,首页显示“跳转中”三秒后,自动跳转到二级页写两个页面,利用传值;改变......
  • vue 父子组件传值方法总结
    1、父组件向子组件传参:(1)父组件直接绑定在子组件的标签上,子组件通过props接收传递过来的参数。(2)父组件主动获取所有的参数和方法this.$refs.childrenName.(参数或方法名)......