美文网首页
layer在父窗口中如何获取子窗口的内容,在子窗口中又如何调用父

layer在父窗口中如何获取子窗口的内容,在子窗口中又如何调用父

作者: 小偷阿辉 | 来源:发表于2019-04-08 18:52 被阅读0次

1.父窗口获取子窗口内容

前一阵子,做一个商品的增删查改,发现Ueditor在同一个页面只能实例化一次,一个页面太多的富文本,页面太大影响美观所以就用一个同一个,采用弹出编辑的方法

页面调用方式
//linkVO是我的json对象
function editDesc(obj){
    var index=$(obj).parent().parent().parent().index();
    var desc=linkVo.prizeVOList[index].prizeLinkDO.prizeDesc;
    //设置富文本的值
    setTimeout(function(){
        UE.getEditor('editor').setContent(desc=='暂无产品介绍'?'':desc,false);
    },666);
    layer.open({
        type : 1,
        title : '奖品介绍',
        closeBtn: 0,
        shadeClose : false, // 点击遮罩关闭层
        area : [ '905px', '500px' ],
        content : $("#editordom"), // iframe的url
         btn: ['确定', '关闭'],
            yes: function(i, layero){ //或者使用btn1
                //或获取富文本的值
                var content=UE.getEditor('editor').getContent();
                content=content==''?'暂无产品介绍':content;
                linkVo.prizeVOList[index].prizeLinkDO.prizeDesc=content;
                $(obj).parent().parent().parent().find(".content"+index).html(content);
                layer.close(i);
            },cancel: function(index){ //或者使用btn2
     
            }
    });
}
效果

2.子页面中调用父页面的方法

这里的场景是,我需要在点击确认地图时就调用父页面的方法,让父页面显示位置,其实大家也可以用这个调用父页面的方法

点击前
点击后
确认后

这里调用的父窗口方法

function getAddress() {
            // iframe层
            layer.open({
                type : 2,
                title : '获取位置',
                maxmin : true,
                shadeClose : false, // 点击遮罩关闭层
                area : [ '800px', '520px' ],
                content : ctx+'shop/shop/searchAddress'
            });
        }
        function  sureAddress(data,address) {
            $("#mapLongitude").val(data.location.lng);
            $("#mapLatitude").val(data.location.lat);
            $("#shopAddress").val(address);
        }

layer弹出iframe

// iframe层  ctx是上下文
            layer.open({
                type : 2,
                title : '获取位置',
                maxmin : true,
                shadeClose : false, // 点击遮罩关闭层
                area : [ '800px', '520px' ],
                content : ctx+'shop/shop/searchAddress'
            });

父页面方法以及获取的元素


页面布局
function  sureAddress(data,address) {
            $("#mapLongitude").val(data.location.lng);
            $("#mapLatitude").val(data.location.lat);
            $("#shopAddress").val(address);
        }

点击确认地址后,关闭子页面,执行以下方法

function  sureAddress() {
        $.ajax({
            url : projectName+"/shop/shop/realizeAddress",
            type : "GET",
            data : {"address":myValue},
            success : function(data) {
                if(data.code==0){
                    if(myValue==undefined){
                        layer.msg("地址无法识别");
                        return;
                    }
                    var realData=JSON.parse(data.msg);
                    $("#mapLongitude").val( realData.location.lng);
                    $("#mapLatitude").val( realData.location.lat);
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);
                    window.parent.sureAddress(realData,myValue);
                }else{
                    layer.msg("地址无法识别");
                }
            },
            error:function () {
                lay.msg("Connection error");
            }

        })
    }

好了,这就是子页面怎么调用父页面的方法,希望能帮到正在遇到这样问题的小伙伴

相关文章

网友评论

      本文标题:layer在父窗口中如何获取子窗口的内容,在子窗口中又如何调用父

      本文链接:https://www.haomeiwen.com/subject/bsipiqtx.html