如何用JavaScript从其他网站提取指定ID的图片src并实时展示？

直接用前端JavaScript没法实现，因为浏览器的同源策略会拦着你——只有当两个网站的协议、域名、端口完全一致时，前端JS才能互相访问资源，跨域的话浏览器会直接拒绝请求。

要解决这个问题，得靠后端代理来中转：

• 自己写个后端服务（比如用Node.js、PHP、Python都行），让后端去请求目标网站的页面，然后解析HTML代码，找到ID为theimage的<img>标签，提取它的src属性。
• 你的前端页面定时调用自己后端的接口，拿到最新的图片地址，再把这个地址赋值给你自己网站上的<img>标签，就能实时展示了。

举个简单的Node.js后端示例（用axios请求页面，cheerio解析HTML）：

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

app.get('/get-image-src', async (req, res) => {
  try {
    const targetUrl = '目标网站的URL'; // 替换成实际目标网站地址
    const response = await axios.get(targetUrl);
    const $ = cheerio.load(response.data);
    const imgSrc = $('#theimage').attr('src');
    // 如果src是相对路径，转成绝对路径
    const absoluteSrc = new URL(imgSrc, targetUrl).href;
    res.json({ src: absoluteSrc });
  } catch (err) {
    res.status(500).json({ error: '获取图片地址失败' });
  }
});

app.listen(3000, () => {
  console.log('代理服务运行在3000端口');
});

你的前端可以定时调用这个接口更新图片：

// 每1小时更新一次（3600000毫秒）
setInterval(async () => {
  const response = await fetch('http://你的后端地址/get-image-src');
  const data = await response.json();
  document.getElementById('my-image').src = data.src;
}, 3600000);

注意：做代理时要遵守目标网站的使用条款，不要违规爬取内容。

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