layer模态框之间相互操作

场景是这样的,资源列表页面点击编辑,弹出编辑模态框,编辑模态框中点击图标区域,在资源列表中再弹出一个新的模态框,用于选择图标,点击任意一个图标后,修改编辑页面的图标和文字;

解决方案

1. 在父页面中配置第一个模态框的id属性

   let index = layui.layer.open({
       area: ['750px', '450px'],
       maxmin: true,
       type: 2,
       title: '修改资源',
       id: 'editRoot',
       content: '/resource/edit/' + resourceId
   });
   

2. 在第二个模态框js方法中获取第一个模态框的id

下面的editRoot就是上面设置的id,需要注意的是layer组件会进行自己的封装,指定的id不是iframe的id,是外面div的id

```
let id =parent.window.$('#editRoot>iframe:first').attr('id');//获得iframeid 格式是 "layui-layer-iframe5" 后面的数字    就是index
```

3. 根据id获得iframe的选择器对象

   let iframe = parent.$('#'+id).contents();//获得iframe的选择器对象
   

4. 使用find()继续使用选择器,选择下级dom进行后续操作

   iframe.find('#icon').val(iconName);
   iframe.find('#iconImg').attr('src',imgSrc);