layui+layer父頁面傳值給子頁面（練習）_layui.layer把index带到子页面-优快云博客

本文链接：https://blog.youkuaiyun.com/u010031813/article/details/117998360

本文介绍了一个使用layui框架实现的网页弹窗交互案例。通过按钮点击触发弹窗，并能在弹窗内输入信息后传递给父页面。示例中包含了iframe层的父子窗口操作及数据传递的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

t05_layertest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="../js/layui-v2.6.8/layui/css/layui.css">

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="../js/layui-v2.6.8/layui/layui.js"></script>
    <!-- 引入 layui.js -->
    <script src="../js/layer-v3.5.1/layer/layer.js"></script>


    <script>

     function openSub(){
            //iframe层-父子操作
            layer.open({
            type: 2,
            area: ['700px', '450px'],
            fixed: false, //不固定
            maxmin: true,
            content: 't05_sub1.html'
            });
     }
    </script>
</head>
<body>
    <div>
        <input id='txtEmpNo' />
        <button id="btnTest" onclick="openSub()">彈出子窗口sub1.html</button>
        
    </div>
</body>
</html>

t05_sub1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <!-- 引入 layui.css -->
        <link rel="stylesheet" href="../js/layui-v2.6.8/layui/css/layui.css">

        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    
        <script src="../js/layui-v2.6.8/layui/layui.js"></script>
        <!-- 引入 layui.js -->
        <script src="../js/layer-v3.5.1/layer/layer.js"></script>

        <script>
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            function transvalue(){
                var vtext=$("#txtTrans").val();
                parent.$('#txtEmpNo').val(vtext);
                //parent.layer.tips('Look here', '#parentIframe', {time: 5000});
                parent.layer.close(index);
                
            }
        </script>
</head>
<body>
    <div>
        <input id="txtTrans">
        <button id="btnTrans" onclick="transvalue()">傳值給父頁面</button>
    </div>
</body>
</html>