JS技术问题：如何克隆外部网页的指定区域

看起来你已经成功用代理+iframe加载了整个外部页面，但想要的是只嵌入其中的特定表格对吧？这个简单的iframe方案确实做不到精准截取，我给你两个可行的解决思路：

方法一：后端代理+DOM提取（推荐，更稳定） #

前端直接处理跨域页面的DOM会有很多限制，所以更可靠的方式是通过后端来中转和处理：

• 第一步：后端发起请求获取目标页面的完整HTML内容（可以用Node.js的axios+cheerio、Python的requests+BeautifulSoup这类工具）
• 第二步：用DOM解析工具定位到你需要的表格元素，提取它的HTML代码
• 第三步：前端通过接口请求后端返回的表格HTML，直接渲染到页面中

举个Node.js的简单示例（基于Express框架）：

// 后端路由代码
const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const app = express();

app.get('/fetch-target-table', async (req, res) => {
  try {
    // 请求目标页面
    const pageResponse = await axios.get('https://eshop-prices.com/?currency=EUR');
    // 用cheerio解析HTML
    const $ = cheerio.load(pageResponse.data);
    // 替换成你实际需要的表格选择器，比如#target-table或者.price-table
    const tableHtml = $('.your-target-table-selector').html();
    res.send(tableHtml);
  } catch (err) {
    res.status(500).send('获取表格失败，请检查目标页面或选择器');
  }
});

app.listen(3000, () => console.log('后端服务运行在 http://localhost:3000'));

然后前端页面可以这样调用：

// 前端加载表格的函数
async function loadTargetTable() {
  try {
    const response = await fetch('http://localhost:3000/fetch-target-table');
    const tableHtml = await response.text();
    // 创建容器插入表格
    const tableContainer = document.createElement('div');
    tableContainer.innerHTML = tableHtml;
    // 可以给容器加样式，比如调整宽度、边框等
    tableContainer.style.width = '100%';
    document.body.appendChild(tableContainer);
  } catch (err) {
    console.error('加载表格出错:', err);
  }
}

// 页面加载时执行
window.onload = loadTargetTable;

方法二：前端通过代理脚本解析DOM（轻量但稳定性稍差） #

如果不想搭建后端，也可以尝试用CORS代理获取页面HTML后，在前端解析提取表格：

async function loadSpecificTable() {
  try {
    // 通过CORS代理获取目标页面HTML
    const proxyUrl = 'http://cors.io/?https://eshop-prices.com/?currency=EUR';
    const response = await fetch(proxyUrl);
    const pageHtml = await response.text();
    
    // 创建DOM解析器处理HTML
    const parser = new DOMParser();
    const doc = parser.parseFromString(pageHtml, 'text/html');
    
    // 定位目标表格，替换成实际的选择器
    const targetTable = doc.querySelector('.your-target-table-selector');
    if (targetTable) {
      // 把表格添加到当前页面
      document.body.appendChild(targetTable);
    } else {
      console.log('未找到目标表格，请检查选择器是否正确');
    }
  } catch (err) {
    console.error('加载表格失败:', err);
  }
}

// 执行加载
loadSpecificTable();

注意：这种方法依赖CORS代理的稳定性，而且如果目标页面的DOM结构更新，你需要同步调整选择器；另外部分代理可能会修改返回的HTML，导致解析失败。

另外补充一下你原来的iframe方案：它只能加载整个页面，没办法只截取指定区域，所以如果要实现只嵌入表格的目标，需要替换成上面两种思路中的一种哦。

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