layer iframe 弹框与主页面之间传值

前言

早就同说过 layer 的大名，但是真正使用起来，还是在今年。

之前一直用的是 jquery confirm 插件：jQuery Impromptu， 点我进入。因为弹框的标题和内容都可以自定义，所以可以构建出简单的页面弹出框（与主页面同源，样式脚本都可以通用）。然后就碰到一些需要在弹出层上提交表单之类的操作，这是 improptu 不能满足的。

当然可以用 bootstrap 框架携带的模态框（model 弹出层），但考虑到系统整体使用情况，还是选择了已经在使用的 layer。

因为是 iframe 弹框，所以会涉及到弹框与主页面之间传值的问题。以下为整理的内容。

弹框示例

//页面一打开就执行，放入 ready 是为了 layer 所需配件（css、扩展模块）加载完毕
layer.ready(function(){
    layer.open({
        type: 2, // 代表 iframe 弹框
        title: '欢迎页',
        maxmin: true,
        area: ['800px', '500px'],
        content: 'http://layer.layui.com/test/welcome.html',
        btn: ['确定', '不需要，直接跳过'],
        success: function(index, layero){
            // 层弹出后的成功回调
        }
        yes: function(index, layero){
            //按钮【按钮一】的回调 确定按钮回调
            var body = layer.getChildFrame('body', index);
            var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
            var catid = '';
            body.find('input[type="checkbox"][name="catid"]:checked').each(function (i) {
                catid += $(this).val()+',';
            });
            catid = catid.substr(0, catid.length-1);
            if (catid === '') {
                layer.msg('请选择信息推送的用户组！');
                return false;
            }
            var title = body.find('#title').val();
            var content = iframeWin.editor.html();
            layer.close(layerid);

            ...

        },
        btn2: function(index, layero){
            //按钮【按钮二】的回调

            //return false 开启该代码可禁止点击该按钮关闭
        },
        cancel: function(){
            //右上角关闭回调
            //return false 开启该代码可禁止点击该按钮关闭
        }
        end: function(){
            // 层销毁后触发的回调
            layer.tips('Hi', '#about', {tips: 1})
        }
    });
});

从主页面传值到弹出层页面

当然可以直接把参数拼接在请求的 url 中，其他方法：

var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

从弹出层页面传值到主页面

parent.$("#handle_status").val('1');

在主页面关闭弹框

var index = layer.open(...);
layer.close(index);

在弹框页面关闭弹框

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);