如何通过Google自定义搜索API获取前40条结果？当前代码失效

首先得明确一个关键限制：Google自定义搜索（CSE）免费版每次请求最多返回10条结果，所以你直接在cse.js的URL里加num=40是无效的——这个参数最大只能设为10，而且这类参数也不能直接拼在加载脚本的URL上，得通过控件配置或API请求来设置。

要获取前40条结果，我们需要分4次分页请求（每次10条），把各页结果整合展示。下面给你两种可行的实现方案：

方案1：基于Google CSE JavaScript控件实现多页加载 #

这个方案沿用你原来的控件方式，通过回调和分页调用实现结果追加：

<script>
(function() {
  var cx = '006925870720824680899:dalusahelrm';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();

// 监听搜索完成事件，加载后续分页
window.__gcse = window.__gcse || {};
window.__gcse.searchCallbacks = {
  webSearch: {
    finished: function(context) {
      // 第一页加载完成后，开始加载第2-4页
      loadNextPages(context.searchQuery, 10);
    }
  }
};

function loadNextPages(searchQuery, startIndex) {
  // 最多加载到第40条，停止递归
  if (startIndex >= 40) return;

  // 获取搜索控件实例
  const searchElement = google.search.cse.element.getElement('searchresults0');
  // 执行分页搜索，设置append: true来追加结果（不覆盖已有内容）
  searchElement.execute(searchQuery, {
    start: startIndex,
    append: true
  });

  // 延迟加载下一页，避免请求过于频繁触发限制
  setTimeout(() => {
    loadNextPages(searchQuery, startIndex + 10);
  }, 500);
}
</script>
<!-- 指定搜索结果容器的ID，方便后续获取控件实例 -->
<gcse:search resultsUrl="results.html" queryParameterName="q"></gcse:search>

关键细节： #

• append: true是核心：默认执行搜索会清空现有结果，设置这个参数后新结果会追加到后面。
• 分页逻辑：每次start参数增加10，对应第11-20、21-30、31-40条结果，递归直到加载满40条。

方案2：使用Custom Search JSON API（更灵活可控） #

如果需要对结果展示做高度自定义，推荐用JSON API（需要先在Google Cloud Console启用API并获取密钥）：

<div id="search-results-container"></div>
<script>
// 替换成你的API密钥和搜索关键词
const API_KEY = '你的Google Cloud API密钥';
const CX = '006925870720824680899:dalusahelrm';
const SEARCH_QUERY = '你的目标搜索词'; // 也可以从输入框动态获取
const TARGET_RESULTS = 40;

async function fetchAndDisplayAllResults() {
  const resultsContainer = document.getElementById('search-results-container');
  resultsContainer.innerHTML = '';

  // 分4次请求，每次10条
  for (let start = 1; start <= TARGET_RESULTS; start += 10) {
    try {
      const response = await fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&cx=${CX}&q=${encodeURIComponent(SEARCH_QUERY)}&start=${start}`);
      const data = await response.json();

      if (data.items) {
        // 遍历结果，生成自定义HTML
        data.items.forEach(item => {
          const resultCard = document.createElement('div');
          resultCard.style.marginBottom = '1rem';
          resultCard.innerHTML = `
            <h3 style="margin: 0;"><a href="${item.link}" target="_blank">${item.title}</a></h3>
            <p style="color: #666; margin: 0.5rem 0;">${item.snippet}</p>
            <p style="font-size: 0.9rem; color: #006621;">${item.link}</p>
          `;
          resultsContainer.appendChild(resultCard);
        });
      }
    } catch (error) {
      console.error('加载搜索结果失败:', error);
      break;
    }
  }
}

// 启动搜索
fetchAndDisplayAllResults();
</script>

注意事项： #

• JSON API需要API密钥，免费版每天有100次请求限制。
• API的start参数是从1开始的（第一页start=1，第二页start=11，以此类推）。
• 可以完全自定义结果的展示样式，适合需要定制UI的场景。

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