如何正确提取动态渲染网页的标题（如 AniList）

霞舞

发布时间：2026-03-02 09:13:10

291人浏览过

来源于php中文网

原创

如何正确提取动态渲染网页的标题（如 AniList）

本文详解为何传统 php dom 解析无法获取 anilist 等单页应用（spa）的真实页面标题，并提供基于浏览器渲染与官方 api 的两种可靠解决方案。

本文详解为何传统 php dom 解析无法获取 anilist 等单页应用（spa）的真实页面标题，并提供基于浏览器渲染与官方 api 的两种可靠解决方案。

在抓取网页标题时，许多开发者习惯使用 file_get_contents() + DOMDocument 解析

或 Open Graph 标签（如 og:title）。这种方法对静态网站（如 MyAnimeList 旧版）完全有效，但面对现代前端框架构建的单页应用（SPA）——例如 <a href="https://www.php.cn/link/84a98e9bea194d59e442e2be756a2e08" rel="nofollow" target="_blank">AniList</a> ——往往失效。<p>以 URL https://www.php.cn/link/84a98e9bea194d59e442e2be756a2e08/anime/527/Pocket-Monsters/ 为例：<br> 源码中初始 </p> <title> 为 "AniList"，而 <meta property="og:title" content="Pokémon"> 确实存在；但你的 PHP 脚本仍返回 "AniList"，原因在于：<strong>该 og:title 标签由 Vue.js 在客户端动态注入，原始 HTML 响应中并不存在</strong>。你看到的 "Pokémon" 是浏览器执行 JavaScript 后 DOM 的最终状态，而 file_get_contents_curl() 仅获取服务器返回的初始 HTML（不含 JS 执行结果），因此无法捕获动态更新的内容。<h3>✅ 正确方案一：调用 AniList 官方 GraphQL API（推荐）</h3> <p>AniList 提供稳定、高效且无需渲染的官方 API，可精准获取动画元数据，包括标题（含本地化名称）：</p><pre class="brush:php;toolbar:false;">function getAniListTitle($animeId) { $query = 'query ($id: Int!) { Media(id: $id, type: ANIME) { title { romaji english native } } }'; $variables = ['id' => (int)$animeId]; $payload = json_encode(['query' => $query, 'variables' => $variables]); $ch = curl_init('https://graphql.anilist.co'); curl_setopt_array($ch, [ CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true, CURLOPT_POSTFIELDS => $payload, CURLOPT_HTTPHEADER => ['Content-Type: application/json'], ]); $response = curl_exec($ch); curl_close($ch); $data = json_decode($response, true); if (isset($data['data']['Media']['title']['romaji'])) { return $data['data']['Media']['title']['romaji']; // e.g. "Pocket Monsters" } return $data['data']['Media']['title']['english'] ?? 'Unknown Title'; } // 使用示例：提取 ID 527 的标题 echo getAniListTitle(527); // 输出：Pocket Monsters</pre><p>✅ 优势： </p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/learn/2593" title="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版"><img src="https://img.php.cn/upload/webcode/000/000/000/5a2b9a88e20e5831.png" alt="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/learn/2593" title="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版">动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版</a> <p>动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包</p> </div> <a href="/xiazai/learn/2593" title="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>100% 准确，无渲染延迟或 JS 执行依赖； </li> <li>支持多语言标题（romaji/english/native）； </li> <li>符合服务条款，抗反爬性强； </li> <li>可批量查询，支持分页与复杂过滤。</li> </ul> <h3>✅ 正确方案二：服务端浏览器渲染（Headless Chrome）</h3> <p>若必须解析任意第三方网站（非 AniList），且目标站点未提供 API，则需模拟真实浏览器环境。推荐使用轻量级工具 <strong>Puppeteer（Node.js）</strong> 或其 PHP 封装（如 <a href="https://www.php.cn/link/543d921c3afce2b0608c1de6dfa48ee2" rel="nofollow" target="_blank">chrome-php/chrome</a>）：</p><pre class="brush:php;toolbar:false;">use HeadlessChromium\BrowserFactory; $browserFactory = new BrowserFactory(); $browser = $browserFactory->createBrowser(); $page = $browser->createPage(); $page->navigate('https://www.php.cn/link/84a98e9bea194d59e442e2be756a2e08/anime/527/Pocket-Monsters/') ->waitForNavigation(); $title = $page->evaluate('document.title')->getReturnValue(); // ✅ 获取 JS 渲染后的真实 title echo $title; // 输出：Pokémon $browser->close();</pre><p>⚠️ 注意事项： </p> <ul> <li>需部署 Chromium 环境，增加服务器资源开销； </li> <li>响应延迟显著高于 API（通常 300–1000ms）； </li> <li>需处理超时、JS 错误、反爬拦截（如 navigator.webdriver 检测）； </li> <li>不建议高频调用，应添加缓存与降级策略。</li> </ul> <h3>❌ 不推荐的做法</h3> <ul> <li>继续依赖 file_get_contents + DOM 解析动态 SPA 页面； </li> <li>尝试“等待 JS 执行”的伪方案（如 sleep() + 重试），不可靠且违反 HTTP 协议语义； </li> <li>使用第三方预览服务（如 Facebook Sharing Debugger API），存在隐私与稳定性风险。</li> </ul> <h3>总结</h3> <p>当目标网站采用客户端渲染（Vue/React/Angular）时，<strong>服务器端 HTML 解析天然失效</strong>。优先选择官方 API（如 AniList GraphQL）——它设计即为机器消费，准确、高效、可持续；仅在无 API 可用时，才考虑 Headless 浏览器方案，并务必做好错误处理与资源管理。记住：抓取 ≠ 渲染，理解页面架构是选择技术路径的前提。</p>

相关专题

Python GraphQL API 开发实战

本专题系统讲解 Python 在 GraphQL API 开发中的实际应用，涵盖 GraphQL 基础概念、Schema 设计、Query 与 Mutation 实现、权限控制、分页与性能优化，以及与现有 REST 服务和数据库的整合方式。通过完整示例，帮助学习者掌握使用 Python 构建高扩展性、前后端协作友好的 GraphQL 接口服务，适用于中大型应用与复杂数据查询场景。

2026.01.21

chrome什么意思

chrome是浏览器的意思，由Google开发的网络浏览器，它在2008年首次发布，并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容，供大家免费下载体验。

1011

2023.08.11

chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

813

2023.11.06

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

529

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

514

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

658

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5879

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

492

2023.09.01

Golang 测试体系与代码质量保障：工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链（如go test）、单元测试、集成测试及端到端测试实践，结合代码覆盖率分析、静态代码扫描（如go vet）和动态分析工具，建立全链路质量监控机制。通过自动化测试框架、持续集成（CI）流水线配置及代码审查规范，实现测试用例管理、缺陷追踪与质量门禁控制，确保代码健壮性与可维护性，为高可靠性工程系统提供质量保障。

2026.02.28

热门下载

网站特效

网站源码

网站素材

前端模板