如何使用JavaScript获取window.open打开页面中指定class的文本内容

你直接调用window.open()后立即执行DOM查询失效，通常是两个原因导致：

1. 新窗口页面未完成加载，DOM还未渲染完成，此时查询只能拿到空结果
2. 同源策略限制：如果新打开的页面和当前页协议、域名、端口三者任意一个不一致，浏览器会禁止父页直接访问新窗口的DOM，属于浏览器安全限制，无原生绕过方法

场景1：新打开的是同源页面 #

监听新窗口的加载完成事件后再执行DOM查询即可，示例代码：

const newWindow = window.open('你的目标页面地址');
// 监听页面加载完成
newWindow.addEventListener('load', () => {
  // 必须通过新窗口的document对象执行查询
  const targetElements = newWindow.document.getElementsByClassName('指定class名称');
  // 也可使用querySelectorAll
  // const targetElements = newWindow.document.querySelectorAll('.指定class名称');

  // 提取元素值并存储示例
  const result = Array.from(targetElements).map(item => item.textContent.trim());
  // 此处添加你自己的存储逻辑
  console.log('提取结果：', result);
});

如果不需要等样式、图片等资源全部加载完成，也可以将load事件替换为DOMContentLoaded，触发时机更早。

场景2：新打开的是跨域页面 #

可控制跨域页面代码 #

使用postMessage实现跨域通信，由跨域页面自身查询DOM后将结果返回给父页：
父页代码示例：

const newWindow = window.open('跨域页面地址');
// 监听子页面返回的消息
window.addEventListener('message', (event) => {
  // 必须做来源校验，避免安全风险
  if (event.origin === '跨域页面的合法源（示例：https://www.example.com）') {
    const result = event.data;
    // 存储逻辑写在这里
  }
});

跨域页面代码示例：

window.addEventListener('load', () => {
  const targetElements = document.getElementsByClassName('指定class名称');
  const result = Array.from(targetElements).map(item => item.textContent.trim());
  // 给父页发送数据，第二个参数填父页的源地址
  window.opener.postMessage(result, '父页的合法源');
});

不可控制跨域页面代码 #

纯前端无可行方案，可改为由后端服务请求目标页面的HTML内容，前端拿到HTML字符串后再解析提取对应class的元素值。

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