美文网首页
layui 向iframe弹窗传值 子父页相互传值

layui 向iframe弹窗传值 子父页相互传值

作者: 书十一 | 来源:发表于2020-12-09 11:15 被阅读0次

子页调用父页面

父页面代码

//用来供子页面成功后调用
    window.success  = function(){
        renderCardData();
        toastr.success('策略添加成功');
    };

子页面代码

        $.ajax({
                   type:'post',
                   url:baseUrl + '/abc...',
                   data:JSON.stringify(data),
                   processData: false,
                   contentType: 'application/json',
                   success:function(res){
                       handleResponse(res,function(data){
                          //调用声明好的方法
                           window.parent.success();
                          //关闭弹窗
                          var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                          parent.layer.close(index); //再执行关闭
                       })
                   }
               })

父页面向子页面传值

父页面代码

          var index = layer.open({
                        title: '编辑用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '../page/table/edit.html',
                        //打开弹窗后回触发succes回调,有俩个参数分别是当前层DOM当前层索引
                        success: function(dom, index) {
                           //通过索引获取到当前iframe弹出层
                            var iframe = window['layui-layer-iframe' + index];
                            //调用iframe弹出层内的方法
                            iframe.edit(data);
                        },
                        //关闭弹窗后触发
                       end: function(){
                            console.log("1111")
                        }
                    });

iframe子页面代码


        var edit = function(data) {

            console.log(data)

        }

也可以在父页面通过dom直接赋值:


          var index = layer.open({
                        title: '编辑用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '../page/table/edit.html',
                        //打开弹窗后回触发succes回调,有俩个参数分别是当前层DOM当前层索引
                        success: function(dom, index) {
                            //也可以通过dom获取iframe的元素直接赋值
                            let iframeDom = $(dom[0]).find("iframe").eq(0).contents();
                            //通过获取的Dom直接给子页的input赋值
                            iframeDom.find("input[name='username']").val(data.username)
                        }
                    });

相关文章

网友评论

      本文标题:layui 向iframe弹窗传值 子父页相互传值

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