如何在window.open打开的HTML页面中查找指定文本并处理数据

需求说明 #

• 用window.open加载GET请求返回的XML视图HTML页面
• 页面内有大量重名div、span元素，目标文本均位于span标签内
• 循环执行逻辑：
  • 查找字符串inactive
    • 未找到：直接加载下一个HTML文件
    • 已找到：继续查找字符串id，将id值存入数组后加载下一个HTML文件

核心问题 #

1. 页面元素类名全部重复，无法通过类名定位目标内容
2. 不清楚如何与window.open打开的新页面进行内容交互

前置注意事项 #

新打开的页面必须和当前页面同源（协议、域名、端口完全一致），否则会受浏览器跨域安全限制，无法操作新页面DOM，这种情况建议改用浏览器扩展脚本或服务端请求方案处理。 #

完整实现代码 #

<button onclick="startScraping()">开始批量查询</button>
<script>
// 存储符合条件的id结果
const idList = [];
// 要查询的id队列，可自行补充更多需要查询的id值
const idQueue = ['1260234', '1260235', '1260236'];
// 接口基础地址
const baseUrl = 'http://secret/';
// 当前查询进度索引
let currentIndex = 0;

function startScraping() {
  // 队列遍历完成后输出结果
  if (currentIndex >= idQueue.length) {
    console.log('全部查询完成，提取到的id列表：', idList);
    alert('查询完成，可打开浏览器控制台查看结果');
    return;
  }
  const currentId = idQueue[currentIndex];
  const tab = window.open(baseUrl + currentId, '_blank', 'width=500,height=500');
  // 等待新页面完全加载后再执行内容查找
  tab.onload = function() {
    // 获取新页面所有span元素，不需要依赖类名
    const allSpans = tab.document.querySelectorAll('span');
    let hasInactive = false;
    let targetId = '';

    allSpans.forEach(span => {
      const text = span.textContent.trim();
      if (text.includes('inactive')) {
        hasInactive = true;
      }
      // 可根据实际id的文本格式调整匹配规则，例如id:xxxx格式就用下方逻辑
      if (text.startsWith('id:')) {
        targetId = text.replace('id:', '').trim();
      }
    });
    // 符合条件则存入结果数组
    if (hasInactive && targetId) {
      idList.push(targetId);
    }
    // 不需要保留标签页可打开下方注释自动关闭
    // tab.close();
    // 处理下一个查询
    currentIndex++;
    startScraping();
  }
}
</script>

逻辑说明 #

• 所有需要查询的id提前存入idQueue数组，脚本会自动按顺序循环处理
• 通过tab.onload事件确保新页面完全加载后再操作，避免找不到元素的问题
• 直接遍历所有span标签的文本内容匹配目标字符串，不需要依赖元素类名，适配类名全部重复的场景
• 所有符合条件的id都会存入idList数组，可直接在后续逻辑中调用

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