美文网首页
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