如何获取外部页面script标签中计数器值并定时刷新？

当然可以实现你的需求！咱们分两部分来解决问题：

一、能否获取远程页面的total值？ #

答案是可以，但直接用前端JavaScript做不到——因为浏览器的「同源策略」会阻止跨域页面直接读取对方的window对象数据。不过我们可以通过后端代理的方式绕开这个限制，具体步骤如下：

核心思路 #

1. 用后端代码抓取目标远程页面的HTML内容
2. 从HTML中解析出包含changeTargetingData的脚本内容
3. 提取并解析脚本里的JSON数据，取出total值
4. 前端通过请求自己的后端接口，拿到这个total值

示例代码（Node.js + Express） #

后端接口实现

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const app = express();

// 允许跨域（如果你的前端和后端不在同一域名下）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// 定义获取计数器的接口
app.get('/get-total-count', async (req, res) => {
  try {
    // 替换成目标远程页面的真实URL
    const targetUrl = 'https://example.com/target-page';
    const pageResponse = await axios.get(targetUrl, {
      // 模拟浏览器请求头，避免被反爬拦截
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
      }
    });

    // 用cheerio解析HTML
    const $ = cheerio.load(pageResponse.data);
    // 找到包含changeTargetingData的script标签
    const scriptTag = $('script:contains("window.changeTargetingData")');
    if (!scriptTag.length) {
      return res.status(404).json({ error: '未找到目标数据' });
    }

    // 提取脚本中的JSON部分
    const scriptContent = scriptTag.html();
    const jsonMatch = scriptContent.match(/window\.changeTargetingData = (.*?);/);
    if (!jsonMatch) {
      return res.status(500).json({ error: '数据格式解析失败' });
    }

    // 解析JSON并返回total值
    const targetData = JSON.parse(jsonMatch[1]);
    res.json({ total: targetData.Count.total });
  } catch (err) {
    console.error('获取数据出错：', err);
    res.status(500).json({ error: '服务器获取数据失败' });
  }
});

// 启动服务
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`服务运行在 http://localhost:${PORT}`);
});

前端调用代码

<!DOCTYPE html>
<html>
<body>
  <h3>当前计数器值：<span id="total-count">加载中...</span></h3>

  <script>
    async function fetchAndDisplayCount() {
      try {
        // 请求自己的后端接口
        const response = await fetch('http://localhost:3000/get-total-count');
        const data = await response.json();
        // 更新页面显示
        document.getElementById('total-count').textContent = data.total;
      } catch (err) {
        document.getElementById('total-count').textContent = '获取失败';
      }
    }

    // 页面加载时先获取一次
    window.onload = fetchAndDisplayCount;
  </script>
</body>
</html>

二、能否实现每小时刷新该值？ #

完全可以！只需要在前端代码中添加定时任务，每小时调用一次获取数据的函数即可。有两种常用方式：

方式1：用setInterval（简单直接） #

// 每3600000毫秒（1小时）刷新一次
setInterval(fetchAndDisplayCount, 3600000);

方式2：用递归setTimeout（避免累计误差） #

如果页面运行时间很长，setInterval可能会因为浏览器休眠等原因出现时间偏差，递归setTimeout更可靠：

function scheduleNextRefresh() {
  setTimeout(() => {
    fetchAndDisplayCount();
    scheduleNextRefresh();
  }, 3600000);
}

// 启动定时刷新
scheduleNextRefresh();

注意事项 #

• 确保后端有访问目标远程页面的权限，如果目标页面有反爬机制，可能需要调整请求头或使用代理IP
• 可以给前端添加加载状态提示，提升用户体验
• 如果目标页面的脚本格式发生变化（比如变量名修改），后端的解析逻辑需要同步调整

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