如何使用jQuery/JS选取外部页面div内容填充HTML页面

可行方案说明 #

你不需要硬编码文章ID就能取到最新3篇内容，nth-child选择器或者直接按顺序截取前N个元素的思路完全可行，两种实现方式可按需选择：

方案1：纯前端jQuery/JS实现

你之前用的jQuery.load()本身支持加载时筛选内容，但更稳定的方式是用$.get拉取完整外部页面内容后，转成DOM对象直接截取排序最靠前的3个文章节点，完全不依赖ID规则：

// DOM加载完成后执行
$(function() {
  // 加载政治栏目内容
  $.get('politics.html', function(pageContent) {
    // 取前3篇文章
    const latest3Pol = $(pageContent).children('div').slice(0, 3);
    latest3Pol.each(function(i) {
      // 填充标题，需要保留文章完整结构就直接替换整个Article块的html
      const title = $(this).find('.artPolTitle').text();
      $(`#ArtPOL${i+1} .ArticleTitle`).text(title);
    })
  })

  // 经济栏目逻辑一致，替换对应路径、ID前缀、标题class即可
  $.get('economy.html', function(pageContent) {
    const latest3Eco = $(pageContent).children('div').slice(0, 3);
    latest3Eco.each(function(i) {
      const title = $(this).find('.artEcoTitle').text();
      $(`#ArtECO${i+1} .ArticleTitle`).text(title);
    })
  })
})

注意：该方案要求politics.html、economy.html和index.php同域，否则会触发浏览器跨域限制无法读取内容。

方案2：PHP服务端渲染（更推荐）

你当前用的是PHP环境，直接在服务端完成内容拉取和解析再输出到页面是更优选择：首屏加载更快、不存在跨域问题、对无JS环境的用户也兼容。
核心实现代码如下：

<?php
// 通用解析函数，传入外部页面路径、文章ID前缀、标题class，返回最新3篇标题
function getLatest3Articles(string $filePath, string $idPrefix, string $titleClass): array {
  if (!file_exists($filePath)) return [];
  $dom = new DOMDocument();
  @$dom->loadHTML(file_get_contents($filePath));
  $xpath = new DOMXPath($dom);
  $articles = $xpath->query("//div[starts-with(@id, '{$idPrefix}')]");
  $result = [];
  for ($i=0; $i<3 && $i<$articles->length; $i++) {
    $title = $xpath->query(".//span[contains(@class, '{$titleClass}')]", $articles->item($i))->item(0);
    $result[] = $title ? trim($title->nodeValue) : '';
  }
  return $result;
}

$polArticles = getLatest3Articles(__DIR__.'/politics.html', 'artpol', 'artPolTitle');
$ecoArticles = getLatest3Articles(__DIR__.'/economy.html', 'arteco', 'artEcoTitle');
?>

页面渲染部分直接输出解析好的内容即可：

<div class="POLSection">
    <div class="Article" id="ArtPOL1">
        <span class="ArticleTitle"><?= $polArticles[0] ?? '' ?></span>
    </div>
    <div class="Article" id="ArtPOL2">
        <span class="ArticleTitle"><?= $polArticles[1] ?? '' ?></span>
    </div>
    <div class="Article" id="ArtPOL3">
        <span class="ArticleTitle"><?= $polArticles[2] ?? '' ?></span>
    </div>
</div>

<div class="ECOSection">
    <div class="Article" id="ArtECO1">
        <span class="ArticleTitle"><?= $ecoArticles[0] ?? '' ?></span>
    </div>
    <div class="Article" id="ArtECO2">
        <span class="ArticleTitle"><?= $ecoArticles[1] ?? '' ?></span>
    </div>
    <div class="Article" id="ArtECO3">
        <span class="ArticleTitle"><?= $ecoArticles[2] ?? '' ?></span>
    </div>
</div>

优化建议：服务端解析时可以加10-15分钟的文件缓存，不需要每次用户访问都重新解析外部HTML，能大幅降低服务器开销。

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