layer.js中父子页面传值的用法

layer.js中父子页面传值的用法

layer是一款web弹层组件，好用的地方先不说了，用了就会知道。

这里只要是记录下自己使用layer插件实现父子页面互相传值的代码。

• 父页面–>子页面

主要代码就是在success：function(){}里面

当弹出页面成功打开的时候执行的。

layer.open({
    type: 2,
    title: '编辑确认',
    maxmin: true,
    shadeClose: false, //点击遮罩关闭层
    shade: [0.3, '#B2B2B2'],
    area: ['510px', '380px'],  //这里是弹框窗体的宽和高，依据自己页面调
    content: 'open_layer.html',   //弹窗内页面url
    btn: ["确定", '关闭'],    
    success: function(layero, index) { 
        var body = layer.getChildFrame("body",index);//绑定父子之间的关系，用于数据传递，缺少则无法传递
        var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象
        iframeWin.$('#wellname').text('父页面给子页面的内容，可以是变量啊~'); //渲染子页面中id为wellname的div标签
    },     
    yes: function(index, layero) { },    
    cancel: function(index, layero) { }
});                          

• 子页面–>父页面

主要代码是yes:function(){}里面

当点击确认之后，执行的。

yes: function(index, layero) {   //获取的事子页面的内容     
    data = layero.find("iframe")[0].contentWindow.callback(); //获取子窗体对象中的方法
    console.log(data);
    layer.close(index);
}, 

子页面中的callback方法

var callbackDeepArr = function() {
    ... ...//执行的代码
    return data;//return 的就是要传过去内容
}