如何用JS跨页面统计指定类元素数量？无需在目标页植入代码

没问题，纯JavaScript完全能实现这个需求，但有几个关键前提和限制得先讲清楚，尤其是跨域访问的约束，我给你一步步拆解可行方案：

核心前提 #

要想不用在目标页面（Page 1）加任何代码，最关键的要求是：Page 1和Page 2必须满足浏览器的同源策略——也就是两个页面在同一域名、同一协议（http/https）、同一端口下。如果跨域了，纯前端JS会被浏览器的安全机制限制，没法直接读取目标页面内容。

具体实现代码（同源场景） #

在Page 2中插入这段代码即可自动统计并更新显示：

async function fetchAndCountToys() {
  try {
    // 替换成Page 1的实际路径，比如'/pages/page1.html'
    const pageResponse = await fetch('/page1.html');
    const pageHtml = await pageResponse.text();

    // 创建一个虚拟DOM容器来解析目标页面的HTML
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = pageHtml;

    // 统计class为"toy"的元素数量
    const toyTotal = tempContainer.querySelectorAll('.toy').length;

    // 更新Page 2里的数字显示
    document.querySelector('p strong').textContent = toyTotal;
  } catch (err) {
    console.error('获取目标页面失败:', err);
    // 出错时显示默认值
    document.querySelector('p strong').textContent = '0';
  }
}

// 页面加载完成后执行统计
window.onload = fetchAndCountToys;

注意事项 #

• 动态元素的问题：如果Page 1里的.toy元素是通过JavaScript动态生成的（比如页面加载后异步添加的），那上面的方法只能统计静态HTML里的元素，动态生成的会被漏掉。这种情况要么需要后端帮忙渲染出完整的页面内容，要么就得在目标页面允许的情况下用iframe（但同样受同源限制）。
• 跨域场景的解决方案：如果两个页面不在同源环境下，纯前端JS没办法直接解决，必须借助后端服务：让后端去请求Page 1的HTML，统计好数量后提供一个接口，Page 2再通过JS调用这个接口获取结果。

测试效果 #

假设你的Page 1静态内容是：

<div class="toy"></div>
<div class="toy"></div>
<div class="toy"></div>
<div class="toy"></div>
<div class="toy"></div>

Page 2的初始HTML是：

<p>有<strong>0</strong>个玩具等待您。</p>
<script>
// 把上面的fetchAndCountToys函数放在这里
</script>

当Page 2加载完成后，会自动把strong标签里的数字更新为5，和你预期的效果一致。

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