如何修改JavaScript代码实现弹窗向父页面传递含id和name的对象？

没问题，我来帮你把分别传递id和name的逻辑改成用对象统一传递～下面分两种最常见的场景给你具体修改方案：

假设你之前的弹窗代码是分别给父页面传递id和name，比如：

// 弹窗旧代码
const id = 101;
const name = "测试名称";
// 分别赋值给父页面的元素或变量
window.opener.document.getElementById('idInput').value = id;
window.opener.document.getElementById('nameInput').value = name;

现在只需要把id和name包装成一个对象，然后一次性传递，推荐用父页面定义接收方法的方式（更清晰可控）：

弹窗页面修改： #

// 弹窗新代码
const selectedData = {
  id: 101,
  name: "测试名称"
};
// 检查父页面是否存在接收方法，然后传递对象
if (window.opener && typeof window.opener.receivePopupData === 'function') {
  window.opener.receivePopupData(selectedData);
  window.close(); // 传递完成后可以关闭弹窗
}

父页面修改： #

在父页面里定义接收对象的方法，拿到对象后再解构使用id和name：

// 父页面新增/修改接收方法
function receivePopupData(data) {
  // 打印看看收到的对象
  console.log('弹窗传来的对象:', data);
  // 把值赋值到对应的输入框或处理逻辑
  document.getElementById('idInput').value = data.id;
  document.getElementById('nameInput').value = data.name;
}

如果不想用方法，也可以直接给父页面的变量赋值对象：

// 弹窗代码
window.opener.selectedData = { id: 101, name: "测试名称" };
// 父页面可以在弹窗关闭后读取这个变量
const popup = window.open('你的弹窗地址');
popup.onunload = () => {
  console.log(popup.selectedData.id, popup.selectedData.name);
  // 后续处理逻辑
};

如果你的弹窗是iframe嵌入的（比如Bootstrap模态框里的iframe），或者需要跨域传值，通常会用postMessage。之前可能分别发送id和name，现在改成发送对象即可：

弹窗/iframe页面修改： #

// 弹窗新代码
const selectedData = {
  id: 101,
  name: "测试名称"
};
// 同域可以用*，跨域建议写具体的父页面域名（比如'https://your-parent-domain.com'）
window.parent.postMessage(selectedData, '*');

父页面修改： #

监听message事件，接收并处理传递过来的对象：

// 父页面新增监听事件
window.addEventListener('message', (event) => {
  // 跨域场景一定要验证来源，避免安全问题
  // if (event.origin !== 'https://your-popup-domain.com') return;
  
  const receivedData = event.data;
  console.log('收到的弹窗数据:', receivedData);
  // 解构使用id和name
  document.getElementById('idInput').value = receivedData.id;
  document.getElementById('nameInput').value = receivedData.name;
});

核心思路就是：把原本分开的id和name打包成一个JSON对象，一次性传递给父页面，父页面接收后再按需提取里面的属性值即可，比分别传递更简洁也更易维护～

内容的提问来源于stack exchange，提问作者kwangkyu