兮漓
随笔 - 56,  文章 - 0,  评论 - 4,  阅读 - 18万
layui父子间传值

原文地址：https://www.cnblogs.com/meiqiyuanzi/p/13476296.html

子传父值

1.html(父页面)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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（子页面）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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（父页面）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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(子页面)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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 on   多年小白  阅读(292)  评论(0)  编辑  收藏  举报
相关博文：
· jq 点击iframe内部元素关闭iframe
· 百度地图 先使用关键字输入提示选择地址，地址不准确的情况下可以拖动定位点移动坐标
· vue再读72-父子之间传值总结
· 父子组件的传值
· 使用iframe的父子页面进行简单的相互传值
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
Copyright © 2025 多年小白
Powered by .NET 9.0 on Kubernetes Powered By博客园
点击右上角即可分享
微信分享提示