layui中,父页面与子页面,函数方法的相互调用、传参

 

<%--父页面--%>
<script type="text/javascript">

    var KaoHaoType = 0;     // 考号类型     自定义参数1

    // 选取考号类型
    function SelectKaoHaoType(callBack) {
        KaoHaoType = 0;     // 默认选择填涂考号
        layer.open({
            type: 2
            , title: '请选择 考号区类型'
            , area: ["800px", "400px"]
            , content: ['/pages/templateSetKH.aspx', 'no']  // '/pages/templateSetKH.aspx?key1=123&key2=123'(常规传参方式)
            , shadeClose: true
            , end: function () {
                callBack(KaoHaoType);
            }
            , success: function (layero, index) {

                var childWindow = $(layero).find("iframe")[0].contentWindow;    // 获取子页面
                childWindow.param1 = "父页面传参数至子页面";                    // 传参至子页面  
                childWindow.TestFunc("参数传递测试!");                         // 调用子页面中的方法
                
            }
        })
    }

    // 父页面中自定义方法1
    function Func1(msg) {
        layui.layer.msg("父页面中Func1()已响应!-> " + msg);
    }

</script>
<%--子页面--%>
<script type="text/javascript">

    var param1 = "子页面自定义参数";

    // 父页面中自定义方法
    function TestFunc(msg) {
        layui.layer.msg("TestFunc:" + msg);
    }

    // 子页面中的功能函数
    function btnClick(typeKH) {
        console.log("btnClick:" + typeKH);

        window.parent.KaoHaoType = typeKH;      // 修改父页面中的参数
        window.parent.Func1("XXXx");            // 调用父页面中的函数
        window.parent.layui.layer.closeAll();
    }

</script>

<think>嗯,用户想了解如何在Layui中实现弹出页面的功能。我需要先回忆一下Layui的文档和相关组件。Layui的弹出层主要使用layer模块,对吧?记得layer有几种类型,比如type:2可以加载一个iframe页面。那用户的问题应该是关于如何通过layer.open方法打开页面,并在页面父页面之间进行交互。 首先,用户可能需要一个基本的示例代码,展示如何打开页面。然后,他们可能想知道如何传递参数,比如在父页面中如何向页面传递数据,以及页面如何将数据返回给父页面。例如,在打开弹层时,可以通过content属性指定页面的URL,并在URL中添加查询参数,比如content: '页面.html?id=123'。然后在页面中通过JavaScript获取这些参数。 另外,关闭弹层也是一个关键点。用户可能需要知道如何在页面操作后关闭弹层,比如调用parent.layer.closeAll()或者父页面预先封装好的关闭方法。还有,页面如何向父页面传递数据,可以通过父页面定义全局函数页面调用parent.getData(data)这样的方式,或者使用layer的end回调函数。 可能还需要提到一些注意事项,比如跨域问题,如果页面父页面不同源的话可能会有权限问题。此外,弹层的样式调整,比如最大化、最小化按钮,皮肤设置,遮罩关闭等选项也是常用的配置。 然后,根据用户提供的引用内容,引用[2]提到了type:2和content指定URL,引用[4]展示了页面调用父页面方法,引用[5]有显示表格的例。需要将这些引用整合到回答中,说明如何具体实现参数传递和数据交互。 用户的问题可能还涉及如何在弹层中显示动态内容,比如表格数据,这时候需要确保页面的HTML结构和JavaScript正确加载数据。可能需要使用layui的table.render方法来渲染表格。 最后,生成相关问题的时候,要考虑用户可能的后续问题,比如性能优化、不同弹层类型的区别、数据验证、关闭回调等。</think>### Layui弹出页面功能实现方法 #### 一、基础实现步骤 1. **父页面调用`layer.open`方法** 使用`type:2`参数指定iframe页面模式,通过`content`属性设置页面URL: ```javascript // 父页面示例代码 layer.open({ type: 2, title: '页面标题', area: ['800px', '600px'], maxmin: true, // 允许最大化/最小化 content: 'subpage.html?id=123' // 页面路径+参数 }); ``` 引用示例中的`type:2`和`content`参数配置[^2] 2. **页面获取父页面参数** 在页面中通过URL解析参数: ```javascript // 页面获取URL参数 const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const id = urlParams.get('id'); ``` #### 二、父页面交互 1. **父→传参** 通过URL参数传递(如`content: 'page.html?key=value'`)或调用页面函数: ```javascript // 父页面调用页面函数 var childFrame = layer.getChildFrame(); childFrame.childFunction(params); ``` 2. **→父传参** 通过`parent`对象调用父页面方法: ```javascript // 页面代码 parent.parentFunction(data); ``` 引用页面调用`parent.getSingleSonData()`的交互方式[^4] #### 三、关闭弹层回调 1. **关闭弹层** 页面关闭当前层: ```javascript var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); ``` 2. **关闭回调** 使用`end`回调函数处理关闭后操作: ```javascript layer.open({ // ...其他参数 end: function(){ location.reload(); // 关闭后刷新父页面 } }); ``` #### 四、高级应用示例 ```html <!-- 带表格的弹层示例 --> <div id="layer-table" style="display:none;"> <table class="layui-table" lay-filter="demo"> <!-- 表格内容通过JS动态加载 --> </table> </div> <script> // 打开带表格的弹层 layer.open({ type: 1, title: '数据列表', content: $('#layer-table'), area: ['900px', '500px'] }); </script> ``` 引用表格弹层的HTML结构设计[^5]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值