已尝试现有方案无效：如何将服务器返回JSON数据追加到新弹窗open.html的user元素？

我来帮你搞定这个问题！你遇到的核心问题大概率是新窗口还没加载完成就尝试操作它的DOM，或者没有正确持有新窗口的引用导致无法访问其文档对象。下面是一套可行的实现方案：

关键思路 #

• 先创建并保存新窗口的引用，监听它的load事件，确保页面完全加载后再操作DOM
• 在AJAX的handleData回调中，等新窗口加载完成后，将JSON数据格式化后追加到#user元素内

完整代码示例 #

// 1. 先创建新窗口并保存引用，避免异步创建导致的DOM访问问题
const newWindow = window.open('open.html', '_blank', 'width=600,height=400');
let isWindowLoaded = false;

// 监听新窗口的加载完成事件，标记页面就绪状态
newWindow.addEventListener('load', () => {
  isWindowLoaded = true;
});

// 你的AJAX调用逻辑（这里用fetch示例，可替换为你现有的AJAX代码）
fetch('你的服务器接口地址')
  .then(response => response.json())
  .then(handleData)
  .catch(error => console.error('数据请求失败:', error));

// 数据处理核心函数
function handleData(jsonData) {
  // 封装一个等待窗口就绪后写入数据的方法
  const writeDataToWindow = () => {
    if (!isWindowLoaded) {
      // 窗口未就绪就延迟重试
      setTimeout(writeDataToWindow, 100);
      return;
    }

    // 获取新窗口中的目标元素
    const userElement = newWindow.document.getElementById('user');
    if (!userElement) {
      console.error('新窗口中未找到ID为"user"的元素，请检查open.html结构');
      return;
    }

    // 将JSON数据格式化后追加到元素内（这里用列表展示，可按需调整格式）
    const dataHtml = Object.entries(jsonData).map(([key, value]) => `
      <li><strong>${key}:</strong> ${typeof value === 'object' ? JSON.stringify(value) : value}</li>
    `).join('');
    
    userElement.innerHTML += `<div class="user-data"><ul>${dataHtml}</ul></div>`;
  };

  writeDataToWindow();
}

重要注意事项 #

• 跨域限制：如果open.html和当前页面不在同一个域名（包括协议、端口）下，浏览器会阻止你访问新窗口的DOM，这是浏览器的安全机制，这种情况需要后端配合做跨域处理
• 务必确保open.html中确实存在ID为user的元素，否则会触发找不到元素的报错
• 如果你用的是jQuery的$.ajax，逻辑完全一致，只需要把fetch部分替换为对应的jQuery AJAX代码即可

内容的提问来源于stack exchange，提问作者이재찬