如何导航基于 JavaScript 的寻呼网站并收集链接

了解基于 JavaScript 的分页和 API 挑战

具有基于 JavaScript 的分页的网站可能会使访问者难以浏览材料，尤其是在分页控件不公开任何 URL 参数的情况下。这使得无法使用传统方法（例如更改 URL 查询）来修改或自动化页面导航。可以通过不同的方法与此类寻呼机进行交互。

当尝试从这些类型的网站检索链接或数据时，就会出现这样的问题。如果您无法手动导航数百个页面，更好的方法是在 JavaScript 分页器上模拟单击事件。该技术使导航过程自动化，大大简化了数据收集工作。

在某些情况下，浏览器开发人员工具中的“网络”选项卡可能会显示提供有用信息的 API 端点。但是，直接与这些端点交互有时可能会导致问题，因为它们可能不允许某些 HTTP 方法，例如通常用于检索数据的 GET 请求。

本文介绍如何在网站的 JavaScript 分页器上模拟点击事件，以及如何处理限制直接访问所需数据的 API 限制。我们还将研究解决特定 API 方法限制的方法，以确保您有效收集所有重要信息。

命令	使用示例
document.querySelector()	此方法用于选择与给定 CSS 选择器匹配的第一个元素。该脚本使用它来选择分页容器 (const pagerContainer = document.querySelector('.pagination')) 并控制分页器按钮。
Array.from()	将类似数组或可迭代对象转换为适当的数组。该脚本将广告链接的 NodeList 转换为数组，以便于操作和映射 (Array.from(document.querySelectorAll('.ad-link-selector'))。
puppeteer.launch()	与 Puppeteer 一起使用时，此命令会启动一个新的无头浏览器实例。它支持自动浏览器操作，例如页面导航和模拟用户交互（const browser = wait puppeteer.launch()）。
page.evaluate()	In Puppeteer, this method allows you to run JavaScript code in the context of the web page you are controlling. It is used here to extract ad links from the DOM (await page.evaluate(() =>在 Puppeteer 中，此方法允许您在您控制的网页上下文中运行 JavaScript 代码。此处用于从 DOM 中提取广告链接（await page.evaluate(() => {...})）。
page.waitForSelector()	等待指定的选择器出现在页面上，然后再继续，确保加载所有动态元素。这在浏览分页内容时尤其重要，因为每次页面更改都会出现新广告（等待 page.waitForSelector('.ad-link-selector')。
axios.post()	向提供的 URL 发送 HTTP POST 请求。该示例尝试通过 POST 而不是 GET 获取数据来避免 405 问题（const response = wait axios.post()）。
console.error()	用于将错误消息写入控制台。当某些项目或 API 请求失败时，它会通过显示错误信息来帮助调试（console.error('页面按钮未找到！'）。
$()	Puppeteer 中选择元素的简写，类似于 document.querySelector()。此脚本使用“下一页”按钮生成分页单击事件 (const nextButton = wait page.$('.pagination-next')。
click()	此方法复制了对 HTML 元素的单击。在脚本中，它用于通过单击正确的页面按钮以编程方式导航寻呼机。

掌握基于 JavaScript 的分页和 API 导航

引入的第一个脚本使用纯 JavaScript 来动态探索具有基于 JavaScript 的分页的页面。此方法背后的基本思想是通过选择并激活适当 HTML 元素上的单击事件来模仿用户点击寻呼机按钮。通过使用识别分页容器 命令，我们可以访问各种页面按钮并自动导航。对于无法手动更改 URL 并且需要快速前端界面来使用分页机制的情况，此方法非常理想。

在第二个脚本中，我们使用 Puppeteer（一个 Node.js 包）来控制无头浏览器。该脚本不仅模拟寻呼机按钮按下，而且还自动执行遍历多个页面的整个过程，收集每次迭代的所有广告链接。 Puppeteer 允许您通过直接与 DOM 元素交互来抓取动态加载的内容，就像真正的用户一样。这里的主要组成部分之一是 ，它允许在页面上下文中执行 JavaScript 代码。这非常适合收集分页页面上的广告链接等数据。

这两个脚本都需要错误处理，以确保即使特定部分丢失或 API 行为异常，自动化流程也能正常运行。例如， 记录执行期间遇到的任何错误，例如在页面上找不到目标按钮时。另外，傀儡师的 命令可确保在脚本尝试交互之前完全加载动态组件（例如广告链接）。这使得在处理严重依赖 JavaScript 来呈现内容的网站时变得非常方便，因为它避免了由于页面加载丢失或不完整而导致的问题。

完成的脚本在后端使用 Axios，这是一个基于 Promise 的 Node.js HTTP 客户端。在这里，我们尝试直接从 API 端点获取数据，根据 HTTP 405 错误，该端点不接受 查询。为了避免这种情况，脚本发送一个 请求，该请求可能会得到服务器的批准。这种方法更适合那些想要提取数据而无需导航前端的用户，但它涉及了解服务器 API 的结构和行为。错误处理保证报告任何 API 请求失败，从而更轻松地解决服务器端数据检索困难。

// Select the pagination container
const pagerContainer = document.querySelector('.pagination');

// Function to trigger a click event on a pager button
function clickPageButton(pageNumber) {
  const buttons = pagerContainer.querySelectorAll('button');
  const targetButton = [...buttons].find(btn => btn.textContent === String(pageNumber));
  if (targetButton) {
    targetButton.click();
  } else {
    console.error('Page button not found!');
  }
}

// Example usage: clicking the 2nd page button
clickPageButton(2);

const puppeteer = require('puppeteer');

// Function to scrape all ad links from a paginated website
async function scrapeAds() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.supralift.com/uk/itemsearch/results');

  let ads = [];
  let hasNextPage = true;

  while (hasNextPage) {
    // Scrape the ad links from the current page
    const links = await page.evaluate(() => {
      return Array.from(document.querySelectorAll('.ad-link-selector')).map(a => a.href);
    });
    ads.push(...links);

    // Try to click the next page button
    const nextButton = await page.$('.pagination-next');
    if (nextButton) {
      await nextButton.click();
      await page.waitForSelector('.ad-link-selector');
    } else {
      hasNextPage = false;
    }
  }

  await browser.close();
  return ads;
}

// Call the scraping function and log results
scrapeAds().then(ads => console.log(ads));

const axios = require('axios');

// Function to fetch data from the API using POST instead of GET
async function fetchData() {
  try {
    const response = await axios.post('https://www.supralift.com/api/search/item/summary', {
      headers: {
        'Content-Type': 'application/json'
      },
      data: { /* Add necessary POST body if applicable */ }
    });

    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error.response ? error.response.data : error.message);
  }
}

// Invoke the fetchData function
fetchData();

优化 JavaScript 分页以进行网页抓取和数据收集

当使用基于 JavaScript 的分页系统探索网站时，研究几种快速提取数据的方法至关重要。一种有时被忽视的选项是拦截分页机制发出的网络请求。通过仔细检查在浏览器的开发人员工具（特别是“网络”选项卡）中执行的查询，您可以确定用于获取每个页面数据的端点。基于 JavaScript 的系统可以使用 或者 请求在不更改 URL 的情况下动态加载数据，这与需要更改 URL 参数的传统分页不同。

要从此类网站提取链接或数据，请拦截请求并检索它们返回的数据。 Puppeteer 和其他工具使您能够监控网络流量并收集有用的数据。当这种策略由于服务器端限制而不可行时，理解 API 行为就变得至关重要。一些API，例如 ，可能会禁止特定方法，例如 并且只允许 查询。调整查询以匹配 API 的预期方法是解决这些限制的有效方法。

最后，在抓取分页数据时，允许请求之间适当的暂停至关重要。许多网站利用速率限制算法来防止滥用，快速连续发送过多请求可能会导致您的 IP 地址暂时被列入黑名单。为了避免检测并确保成功提取数据，请在查询之间添加随机延迟或限制并发请求的数量。使用类似的工具 在 Node.js 中，适当的速率处理是实现这一目标的绝佳方法。

1. 什么是基于 JavaScript 的分页？
2. 基于 JavaScript 的分页是一种分页按钮使用 JavaScript 动态加载新材料的方式，通常无需更改 URL。
3. 如何从 JavaScript 分页网站中抓取数据？
4. 您可以使用类似的工具 或者 自动点击分页按钮或在分页期间捕获网络请求。
5. 为什么 API 返回 405 Method Not allowed 错误？
6. 出现这种情况是因为 API 仅支持某些 HTTP 方法。例如，它可能会阻止 请求同时允许 请求。
7. 我可以修改 URL 来导航页面吗？
8. 在基于 JavaScript 的分页中，您通常无法直接更改 URL。要进行导航，您需要触发 JavaScript 事件或使用 API 端点。
9. 我可以使用哪些工具来抓取分页数据？
10. 流行的抓取程序包括 用于浏览器自动化和 用于 HTTP 请求。两者都可以有效地处理分页内容。

使用基于 JavaScript 的分页需要结合前端和后端解决方案。无论您使用 Puppeteer 来自动化浏览器活动，还是使用 Axios 直接与 API 端点交互，高效的抓取都需要仔细的设计和执行。

了解网站如何加载和处理数据可以让您编写高效的脚本来提取必要的信息。为了避免 405 错误等频繁出现的危险，请小心监控网络流量、管理速率限制并使用正确的 HTTP 方法。