如何使用原生JavaScript（Vanilla JS）获取外部网站特定文本数据？

1. 先解决跨域限制问题 #

直接在前端请求https://www.radionova.bg/schedule/index会触发浏览器的**跨域资源共享（CORS）**限制——因为你的项目域名和电台网站域名不一致。常用解决方式有两种：

• 后端代理：在自己的服务器上写一个接口，由后端请求电台页面并返回内容，前端再请求自己的后端接口（生产环境推荐）。
• 测试用CORS代理：仅用于本地测试，在请求URL前添加公开代理前缀（不建议生产环境使用）。

另外，你可以先打开电台网站的开发者工具（F12 → Network面板），看看是否有官方API直接返回播放信息，这种方式比解析HTML更可靠。

2. 原生JS实现步骤 #

步骤1：发起请求获取页面HTML #

使用fetch API获取电台页面的HTML内容：

async function getRadioPageHTML() {
  try {
    // 这里替换为实际可请求的URL（比如带代理前缀或自己的后端接口）
    const response = await fetch('https://www.radionova.bg/schedule/index');
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    return await response.text();
  } catch (err) {
    console.error('获取页面出错：', err);
    return null;
  }
}

步骤2：解析HTML提取播放信息 #

用DOMParser把HTML转换成DOM对象，再通过元素选择器定位当前播放内容（必须先在电台页面用开发者工具确认实际选择器，以下为示例）：

async function getCurrentTrack() {
  const html = await getRadioPageHTML();
  if (!html) return null;

  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  
  // 替换为你在电台页面找到的真实选择器，比如当前播放歌曲的元素class/id
  const trackElement = doc.querySelector('.current-play .track-title');
  if (!trackElement) {
    console.error('未找到当前播放内容的元素');
    return null;
  }
  
  return trackElement.textContent.trim();
}

步骤3：更新项目页面元素 #

拿到播放内容后，修改目标元素的innerHTML：

async function updateTrackDisplay() {
  const currentTrack = await getCurrentTrack();
  if (!currentTrack) return;
  
  // 替换为你项目中要更新的元素选择器
  const displayElement = document.getElementById('radio-current-content');
  if (displayElement) {
    displayElement.innerHTML = `<span>当前播放：</span><strong>${currentTrack}</strong>`;
  }
}

// 首次执行更新
updateTrackDisplay();

// 定时刷新（比如每30秒更新一次）
setInterval(updateTrackDisplay, 30000);

3. 关键注意事项 #

• 选择器要准确：必须自己在电台页面的开发者工具中定位到当前播放内容的元素，示例中的选择器仅作参考。
• 生产环境用后端代理：公开CORS代理存在安全和稳定性问题，正式项目一定要通过自己的后端转发请求。
• 错误处理不能少：代码中加入了异常捕获，避免请求失败导致页面功能异常。

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