/content - 获取 HTML

/content 端点指示浏览器导航到网站，并在 JavaScript 执行后捕获页面的完整渲染 HTML，包括 head 部分。这非常适合从 JavaScript 密集型或交互式网站捕获内容。

可通过两种方式使用此端点：

• REST API：创建自定义 API Token，并授予 Browser Rendering - Edit 权限。
• Workers 绑定：通过 Workers 绑定 从 Cloudflare Worker 直接调用端点。无需 API token。

更多信息请参阅 Quick Actions：开始之前。

https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/content

必须提供 url 或 html 之一：

• url（字符串）
• html（字符串）

• 捕获动态页面的完整渲染 HTML
• 提取 HTML 用于解析、抓取或下游处理

curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/content' \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer <apiToken>' \
  -d '{"url": "https://developers.cloudflare.com/"}'

import Cloudflare from "cloudflare";

const client = new Cloudflare({
	apiToken: process.env["CLOUDFLARE_API_TOKEN"],
});

const content = await client.browserRendering.content.create({
	account_id: process.env["CLOUDFLARE_ACCOUNT_ID"],
	url: "https://developers.cloudflare.com/",
});

console.log(content);

interface Env {
	BROWSER: BrowserRun;
}

export default {
	async fetch(request, env): Promise<Response> {
		return await env.BROWSER.quickAction("content", {
			url: "https://developers.cloudflare.com/",
		});
	},
} satisfies ExportedHandler<Env>;

导航到 https://cloudflare.com/ 但阻止图片和样式表加载。可以通过资源类型（rejectResourceTypes）或使用正则表达式模式（rejectRequestPattern）阻止不需要的请求。也可以相反操作，仅允许匹配 allowRequestPattern 或 allowResourceTypes 的请求。

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/content' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
      "url": "https://cloudflare.com/",
      "rejectResourceTypes": ["image"],
      "rejectRequestPattern": ["/^.*\\.(css)"]
		}'

还有许多其他选项，例如使用 setExtraHTTPHeaders 设置 HTTP 请求头、设置 cookies 以及使用 gotoOptions 控制页面加载行为——查看端点参考了解所有可用参数。

对于 JavaScript 密集型页面或单页应用（SPA），默认的页面加载行为可能返回空或不完整的结果。这是因为浏览器在 JavaScript 完成渲染内容之前就认为页面已加载完毕。

最简单的解决方案是将 gotoOptions.waitUntil 参数设置为 networkidle0 或 networkidle2：

{
	"url": "https://example.com",
	"gotoOptions": {
		"waitUntil": "networkidle0"
	}
}

如需更快响应，高级用户可使用 waitForSelector 等待特定元素，而非等待所有网络活动停止。这需要了解哪个 CSS 选择器表示所需内容已加载。更多详情，请参阅 Quick Actions 超时。

可在 JSON 请求体的顶层传入 userAgent 参数，在页面级别更改 user agent。当目标网站根据 user agent 返回不同内容时很有用。

如有疑问或遇到错误，请参阅 Browser Run 常见问题与故障排除指南。