本文详解在Layui项目中，如何通过多层级iframe通信实现弹出框内的Tab选项卡数据回传。重点解析B界面双击列表、A界面提交按钮触发数据回写至Z界面的完整流程，涵盖跨窗口调用、DOM元素取值及Layer窗口关闭的具体代码实现。
多层级弹出框数据回传场景
在近期开发的一个项目中，使用了Layui框架。需求是在界面Z上弹出一个子窗口A，该窗口A包含Tab选项卡，分别对应界面B和C。其中，界面B展示一个数据列表，要求当双击列表某一行时，将选中数据回写到父窗口Z；同时，在界面A上设有提交按钮，当用户在界面B中选中列表某条数据并点击A的提交按钮时，同样需要将数据回写至界面Z。
双击列表数据回写实现
实现思路如下：对于双击事件，需要在界面B中定义双击方法，该方法调用界面A中的处理函数，进而由界面A调用界面Z的方法完成数据回写。
界面B中的双击处理逻辑如下：
function dbclick_select(row,index){
debugger;
if(row == null){
var nodes=$("#TableSelectList").bootstrapTable('getSelections');
row = nodes[0];
if(row == undefined){
row = null;
}
}
if(row != null && row != ""){
window.parent.onBackDwxx(row);
}else{
layer.alert("请选择一项数据");
}
}
界面A中接收数据并处理的函数如下：
function onBackDwxx(row) {
debugger;
window.parent.onBackDwxx(row);
var iframeName = window.name;
var index = parent.layer.getFrameIndex(iframeName);
window.parent.layer.close(index);
}
界面Z中接收最终回写数据的函数如下：
function onBackDwxx(row) {
$("#query\\.dw_id").val(row.id);
$("#dw_mc").val(row.zsdwmc);
}
提交按钮数据回传逻辑
对于界面A上的提交按钮，其逻辑是调用界面Z的提交方法，该方法会回调界面A中的函数，最终由界面A将数据传递回界面Z。
具体而言，界面Z调用界面A的方法时，通过以下代码获取iframe内的内容窗口并触发选择事件：$(layero).find("iframe")[0].contentWindow.onSelectTableDwxx();
界面A中负责处理提交逻辑的代码如下：
function onBackDwxx(row) {
debugger;
window.parent.onBackDwxx(row);
var iframeName = window.name;
var index = parent.layer.getFrameIndex(iframeName);
window.parent.layer.close(index);
}
function onSelectTableDwxx(){
var winx = $("#iframe1").find("iframe")[0].contentWindow;
var nodes = winx.$("#TableSelectList").bootstrapTable('getSelections');
onBackDwxx(nodes[0]);
}
界面Z中用于接收并填充表单数据的函数如下：
function onBackDwxx(row) {
$("#query\\.dw_id").val(row.id);
$("#dw_mc").val(row.zsdwmc);
}
以上即为Layui弹出框中Tab选项卡数据回传的完整示例代码，供参考使用。