layui使用 ——父,子页面传值

Posted fmlyzp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui使用 ——父,子页面传值相关的知识,希望对你有一定的参考价值。

    页面传值是非常常用的,layui自带弹窗功能,但是内置使用的是location.href 暂时没找到方法条件请求头,所以在后台需要放开拦截器,

  

   layer.open({
                    type : 2,
                    title: "分类详情",
                    area: ["50%","90%"],
                    closeBtn: false,
                    shadeClose: true, //点击遮罩关闭
                    btn: [‘保存‘, ‘关闭‘] ,
                    yes: function(index,layero){
                        var winds = $(layero).find("iframe")[0].contentWindow;
                       var itemCatDetail ={
                            cateDeId:winds.cateDeId,
                            cateId:data.catId,
                            introduction:winds.layedit.getContent(winds.editor),
                            imgStr:winds.imgUrlList,
                            videoStr:winds.videoUrl
                        }
                        console.log(JSON.stringify(itemCatDetail));
                        if(!lock) {
                            lock=true;
                            layui.$.ajax({
                                type: "POST",
                                url: "/itemCat/addItemCatDetail",
                                data: JSON.stringify(itemCatDetail),
                                dataType: ‘json‘,
                                contentType: "application/json; charset=utf-8",
                                beforeSend: function (XMLHttpRequest) {
                                    XMLHttpRequest.setRequestHeader("token", layui.data(layui.setter.tableName)["token"]);
                                },
                                success: function (res) {
                                    layer.msg(res.msg);
                                    var iframeWin = window[layero.find(‘iframe‘)[0][‘name‘]];
                                    iframeWin.location.reload;
                                },
                                complete: function( xhr,data ){
                                    layui.data(layui.setter.tableName, {
                                        key: "token",
                                        value: xhr.getResponseHeader("token")
                                    })
                                }
                            });
                        }
                    },
                    btn2: function(){
                        layer.closeAll();
                    },
                    shade: 0,
                    content : "CateDetail.html",
                    success:function(layero,index){
                        var body = layer.getChildFrame(‘body‘, index);
                        body.contents().find("#cateId").val(data.catId);
                    }});
            }
 在layer.open的success方法中拿到子页面的body对象 var body = layer.getChildFrame(‘body‘, index);
然后对隐藏的<input type="hidden" name="parentId" id="cateId">中赋值 body.contents().find("#cateId").val(data.catId);此时直接获取即可
然后可以使用 var winds = $(layero).find("iframe")[0].contentWindow;获取子页面的window对象可以拿到子页面定义的变量的值,即可获取子页面的值,然后请求后台即可
子页面也可以使用
$("#back").click(function () {
var indexNow = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.location.reload();
parent.layer.close(indexNow);

})

关闭子页面,并刷新父页面

以上是关于layui使用 ——父,子页面传值的主要内容,如果未能解决你的问题,请参考以下文章

layui 父页面获取弹窗传递的值 和 父页面传值给子弹窗的方法

layeriframe通过属性id传值

js传值到iframe中

layer.open中父页面向子页面传值

跨域访问方法介绍--使用片段识别符传值

子页面(弹出框)获取父页面中 链接地址,获取传值问题