重定向后如何通过DOM获取页面内容并提取URL中的ID？

Got it, let's walk through how to handle this redirect scenario, capture the product ID from the final URL, and access the page's DOM content properly:

1. Wait for the Redirected Page to Load #

Since the browser automatically jumps to the new URL, we need to ensure our code runs after the redirected page is fully ready to interact with. The best way to do this is using the DOMContentLoaded event—it fires as soon as the initial HTML is parsed and the DOM is built, without waiting for images or stylesheets to finish loading:

document.addEventListener('DOMContentLoaded', () => {
  // Run our logic once the redirected page is ready
  const productID = extractProductID();
  fetchPageContent(productID);
});

2. Extract the ID from the Final URL #

The final URL follows the pattern www.example.com/product/name/ID. Here are two reliable ways to pull that ID out:

Option A: Split the URL Path #

Split the URL's path into segments and grab the last non-empty segment (this works even if there's a trailing slash):

function extractProductID() {
  const pathParts = window.location.pathname.split('/');
  // Filter out empty strings (from leading/trailing slashes) and take the last part
  const id = pathParts.filter(part => part !== '').pop();
  console.log('Extracted Product ID:', id);
  return id;
}

Option B: Use a Regular Expression #

If your ID has a consistent pattern (like alphanumeric characters), a regex can target it directly for more precision:

function extractProductID() {
  // Match the segment after "/product/name/"
  const idMatch = window.location.pathname.match(/\/product\/name\/([^\/]+)/);
  if (idMatch) {
    const id = idMatch[1];
    console.log('Extracted Product ID:', id);
    return id;
  }
  console.log('No valid ID found in the URL');
  return null;
}

3. Fetch the Page's DOM Content #

Once the DOM is ready, you can access any element or content you need. Here are common use cases:

• Grab the entire page's HTML:

function fetchPageContent(productID) {
  const fullPageHTML = document.documentElement.innerHTML;
  console.log(`Full content for product ${productID}:\n`, fullPageHTML);
}

• Target specific elements (e.g., product title, description):

function fetchPageContent(productID) {
  const productTitle = document.querySelector('.product-title')?.textContent.trim();
  const productPrice = document.querySelector('.product-price')?.textContent;
  const productDetails = document.querySelector('.product-details')?.innerHTML;

  console.log(`Product ${productID} Details:`);
  console.log('Title:', productTitle);
  console.log('Price:', productPrice);
  console.log('Details:', productDetails);
}

Quick Notes #

• If you're using a headless browser like Puppeteer, you'll need to explicitly wait for the redirect to complete first—use page.waitForNavigation({ waitUntil: 'domcontentloaded' }) before running your extraction code.
• Adjust the regex or path split logic if your final URL structure varies (e.g., if the ID isn't the last segment).

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