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

最新推荐文章于 2024-09-15 15:45:09 发布

scimence

最新推荐文章于 2024-09-15 15:45:09 发布

阅读量1.1k

点赞数 2

文章标签： layui javascript 前端父页面与子页面相互调用传参

本文链接：https://blog.csdn.net/scimence/article/details/136375856

版权

本文介绍了如何使用JavaScript实现父页面与子页面之间的考号类型选择以及参数传递，展示了通过layui层组件进行通信和调用的方法。

摘要由CSDN通过智能技术生成

<%--父页面--%>
<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>