如何将window.open打开页面的纯数字返回值传递到父页面文本框

嘿，这个需求其实有几种可行的实现方式，不过得先考虑浏览器的同源策略限制——毕竟安全机制会直接影响我们的操作。我给你拆解一下不同场景下的解决方案：

方案一：利用window.open的窗口引用直接读取（仅同源场景） #

如果你的page1和新打开的https://www.abc.com/id=5468是同源的（也就是域名、协议、端口完全一致），那可以直接通过window.open返回的窗口对象来读取内容：

// 在page1的脚本中
const newWindow = window.open("https://www.abc.com/id=5468");

// 监听新窗口加载完成事件
newWindow.addEventListener('load', function() {
  // 获取新页面的纯数字内容（trim去掉可能的空白字符）
  const numberContent = newWindow.document.body.textContent.trim();
  // 把内容填充到page1的文本框里（假设文本框的id是"targetInput"）
  document.getElementById('targetInput').value = numberContent;
  // 可选：读取完成后关闭新窗口
  newWindow.close();
});

⚠️ 注意：如果两个页面不同源，浏览器会直接阻止你访问新窗口的document对象，这时候就得换其他方法了。

方案二：用Fetch API替代window.open（更推荐，跨域需后端配合） #

其实没必要打开新窗口来获取纯数字内容，直接用fetch请求这个接口会更优雅，也能避免新窗口的交互成本：

// 在page1的脚本中
fetch("https://www.abc.com/id=5468")
  .then(response => {
    // 先确保请求成功
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.text();
  })
  .then(numberContent => {
    // 可选：校验返回内容是否为纯数字
    if (/^\d+$/.test(numberContent.trim())) {
      document.getElementById('targetInput').value = numberContent.trim();
    } else {
      console.error('返回的内容不是纯数字格式');
    }
  })
  .catch(error => {
    console.error('获取数据出错:', error);
  });

⚠️ 注意：如果这个接口和page1不同源，需要后端在响应头中配置Access-Control-Allow-Origin，允许page1的域名访问，否则fetch请求会被浏览器拦截。

跨域且必须使用window.open的场景（需新页面配合） #

如果业务上必须打开新窗口，而且两个页面不同源，那只能让新页面主动给page1发送消息，这需要你能控制新页面的代码（也就是修改返回纯数字的那个页面）：

1. 首先在新页面的代码中添加发送消息的逻辑：

// 新页面的脚本（需要嵌入到返回纯数字的页面中）
const numberContent = document.body.textContent.trim();
// 给打开当前窗口的page1发送消息
window.opener.postMessage(numberContent, '*');
// 可选：发送完成后关闭自己
window.close();

2. 然后在page1中监听message事件接收数据：

// 在page1的脚本中
window.addEventListener('message', function(event) {
  // 安全起见，校验消息来源的域名
  if (event.origin === 'https://www.abc.com') {
    const numberContent = event.data;
    if (/^\d+$/.test(numberContent)) {
      document.getElementById('targetInput').value = numberContent;
    }
  }
});

这样就能在跨域场景下完成数据传递了，不过前提是你能修改新页面的代码。

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