如何从其他网站获取指定div内容及表格内容？附前端实现代码

Hey there! Let's break down your two questions and fix the hurdles you might be hitting with your current approach.

First off, the big issue you're likely facing is browser cross-origin restrictions. Your existing httpGet function uses XMLHttpRequest, but browsers block frontend JavaScript from fetching content from external domains unless the target site explicitly allows it via CORS headers. That's probably why your code isn't working as expected.

Solution: Use a server-side proxy #

The most reliable way to get around CORS is to route the request through your own server. Here's a step-by-step breakdown:

Step 1: Set up a simple proxy (Node.js/Express example)

// Server-side code (Node.js + Express)
const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy', async (req, res) => {
  try {
    const targetUrl = req.query.url;
    const response = await axios.get(targetUrl);
    res.send(response.data);
  } catch (error) {
    res.status(500).send('Failed to fetch target content');
  }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

Step 2: Update your frontend JS to use the proxy

Modify your httpGet function to call your proxy instead of the target URL directly, then parse the response to extract the desired div:

function httpGet(theUrl) {
  // Route request through your proxy, pass target URL as a query parameter
  const proxyUrl = `http://localhost:3000/proxy?url=${encodeURIComponent(theUrl)}`;
  
  let xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      // Parse the raw HTML response into a DOM object
      const parser = new DOMParser();
      const doc = parser.parseFromString(xmlhttp.responseText, 'text/html');
      // Replace with your target div's CSS selector
      const targetDiv = doc.querySelector('#your-target-div-id');
      
      if (targetDiv) {
        createDiv(targetDiv.innerHTML);
      } else {
        console.log('Target div not found on the remote site');
      }
    }
  };

  xmlhttp.open("GET", proxyUrl, true);
  xmlhttp.send();
}

// Example implementation of your createDiv function
function createDiv(content) {
  const newDiv = document.createElement('div');
  newDiv.innerHTML = content;
  document.body.appendChild(newDiv);
}

Key Notes: #

• Replace #your-target-div-id with the actual CSS selector of the div you want to extract.
• Host your proxy on the same domain as your frontend (or configure CORS for the proxy if needed) to avoid additional cross-origin issues.

This builds directly on the proxy solution above. Once you can fetch the target site's HTML, you can either inject the existing table or parse its data to render a custom table on your site.

Option 1: Inject the existing table directly #

Adjust the frontend code to target the table instead of a div:

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(xmlhttp.responseText, 'text/html');
    // Replace with your target table's CSS selector
    const targetTable = doc.querySelector('#your-target-table-id');
    
    if (targetTable) {
      // Append the table to your site's container (clone it to avoid DOM issues)
      document.getElementById('your-site-table-container').appendChild(targetTable.cloneNode(true));
    } else {
      console.log('Target table not found on the remote site');
    }
  }
};

Option 2: Parse table data and render a custom table #

If you want full control over styling or functionality, parse the table rows into a data structure first:

// Helper function to extract table data into an array
function parseTableData(tableElement) {
  const rows = tableElement.querySelectorAll('tr');
  const tableData = [];
  
  rows.forEach(row => {
    const cells = row.querySelectorAll('td, th');
    const rowContent = Array.from(cells).map(cell => cell.textContent.trim());
    tableData.push(rowContent);
  });
  
  return tableData;
}

// Use this in your onreadystatechange callback:
const targetTable = doc.querySelector('#your-target-table-id');
if (targetTable) {
  const tableData = parseTableData(targetTable);
  renderCustomTable(tableData);
}

// Render a custom-styled table on your site
function renderCustomTable(data) {
  const table = document.createElement('table');
  table.classList.add('your-custom-table-style'); // Add your own CSS classes
  
  data.forEach((rowContent, index) => {
    const row = document.createElement('tr');
    rowContent.forEach(cellText => {
      // Use <th> for the first row (header)
      const cell = document.createElement(index === 0 ? 'th' : 'td');
      cell.textContent = cellText;
      row.appendChild(cell);
    });
    table.appendChild(row);
  });
  
  document.getElementById('your-site-table-container').appendChild(table);
}

Syncing Tips: #

• Set up a scheduled task on your server to fetch and cache the table content periodically (instead of fetching on every page load) to reduce load on the target site and speed up your own site.
• Add error handling for cases where the target site's HTML structure changes (e.g., selector breaks) to avoid breaking your sync.

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