layer是一个很不错的弹层组件
但在某些特定场景下,互相传值不太友好
场景
共三个页面 分别是 列表页 ,编辑页,再加一个编辑页弹出的顶层页
难点:编辑页再弹出父级窗口选择后传值到编辑页
列表页
新增 编辑里弹出iframe,强行指定ID但这个ID是iframe外层的divID
layer.open({
type: 2,
id:'nb_add', //这里的ID新增编辑最好分开 如nb_add nb_edit
content: '编辑.html'
});
编辑页
- 此弹层是列表页iframe的id为列表页指定
- 再弹出选择页需要同时传递本iframe
layer.open({
type: 2,
content: '选择.html?pop_src=nb_add' //需要传递页iframe的id以便查找
});
//回调
var callback = function (e){
console.log(e)
}
选择页
//关闭本层的id
let index = parent.layer.getFrameIndex(window.name);
try {
//非二次弹层回调
parent.callback && parent.callback (data)
} catch (error) {
//二次弹层回调
//{$pop_src}为URL传递来的目标iframe的id 这里是php的模板标签,根据需要修改
try {
let _w = parent.layui.$("#{$pop_src}").find("iframe")[0].contentWindow;
_w.callback && _w.callback (data);
} catch (error) {
//没有找到回调时显示内容
layer.msg(data); //如果data非字符请转换后显示JSON.stringify()
}
}
parent.layer.close(index);
到此 多页面传值已完成,以上代码生产环境调试通过!
个人笔记,仅做参考!