如何通过Yahoo Finance的XPath在Blogspot展示比特币实时数据？

原代码失效的原因 #

• 跨域请求被拦截：浏览器的安全机制会阻止前端直接请求Yahoo Finance页面，因为对方服务器未开启跨域访问权限，导致请求无法正常返回数据。
• 页面结构依赖不稳定：Yahoo Finance的页面布局随时可能调整，你写的XPath路径一旦对应元素位置变化，就无法定位到价格数据。
• 无错误处理逻辑：如果请求失败或找不到目标元素，代码会直接报错，没有任何提示，也无法 fallback 到友好状态。

修正方案（使用稳定的加密货币API） #

替换原代码为以下内容，用CoinGecko的免费公开API获取数据，该API支持跨域，且专门服务于加密货币价格查询，数据更可靠：

<div>
  <h2>Bitcoin Price:</h2>
  <span id="bitcoin-price">加载中...</span>
</div>

<script>
// 获取比特币价格的核心函数
function getBitcoinPrice() {
  // CoinGecko免费API，支持跨域请求
  const url = "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd";
  
  fetch(url)
    .then(response => {
      if (!response.ok) throw new Error('请求异常');
      return response.json();
    })
    .then(data => {
      const price = data.bitcoin.usd;
      // 格式化价格为标准美元显示格式
      document.getElementById("bitcoin-price").textContent = `$${price.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
    })
    .catch(error => {
      document.getElementById("bitcoin-price").textContent = "加载失败，请稍后重试";
      console.error(error);
    });
}

// 页面加载时立即获取一次价格
getBitcoinPrice();
// 每5分钟自动刷新价格（可修改毫秒数调整刷新频率）
setInterval(getBitcoinPrice, 5 * 60 * 1000);
</script>

方案优势 #

• 数据来源稳定，不受页面布局变化影响
• 支持跨域，浏览器不会拦截请求
• 加入错误处理，加载失败时显示友好提示
• 自动定时刷新，保持价格实时性
• 价格格式化为标准美元样式，更易读

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