通用抓取API功能JS Render

JS 渲染

通用抓取 API 是一款功能强大的 Web 内容检索服务，支持复杂的网页渲染和交互场景。

请参考我们的 API 文档 获取详细信息。

基本请求结构

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": false,
    "headless": false
  },
  "proxy": {
    "country": "US"
  }
}

核心功能

JavaScript 渲染

JavaScript 渲染功能能够处理动态加载的内容和单页应用 (SPA)。它启用完整的浏览器环境，支持更复杂的页面交互和渲染需求。

js_render=true，我们将使用浏览器发出请求。

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://www.google.com/",
    "js_render": true
  },
  "proxy": {
    "country": "US"
  }
}

JavaScript 指令

提供了一套广泛的 JavaScript 指令，允许您与网页动态交互。

这些指令使您可以单击元素、填写表单、提交表单或等待特定元素出现，从而为诸如单击“阅读更多”按钮或提交表单之类的任务提供灵活性。

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": true,
    "js_instructions": [
      {
        "wait_for": [
          ".dynamic-content",
          30000
        ]
        // 等待元素
      },
      {
        "click": [
          "#load-more",
          1000
        ]
        // 单击元素
      },
      {
        "fill": [
          "#search-input",
          "search term"
        ]
        // 填写表单
      },
      {
        "keyboard": [
          "press",
          "Enter"
        ]
        // 模拟按键
      },
      {
        "evaluate": "window.scrollTo(0, document.body.scrollHeight)"
        // 执行自定义 JS
      }
    ]
  }
}

以下是您可以使用 JavaScript 指令执行的一些常见操作：

JavaScript 指令参考

指令语法描述示例
wait_for[selector, timeout]等待元素出现{"wait_for": [".content", 30000]}
click[selector, delay]单击元素{"click": [".button", 1000]}
fill[selector, value]填写表单{"fill": ["#input", "text"]}
waitmilliseconds固定等待时间{"wait": 2000}
evaluatejavascript_code执行 JS 代码{"evaluate": "console.log('test')"}
keyboard[action, value, delay?]键盘操作请参见下表键盘操作

键盘操作

操作语法描述示例
按键["press", keyInput]按下特定 keyInput{"keyboard": ["press", "Enter"]}
输入文本["type", text, delay?]输入文本，可选延迟{"keyboard": ["type", "Hello", 20]}
按下按键["down", key]按住按键{"keyboard": ["down", "Shift"]}
松开按键["up", key]松开按键{"keyboard": ["up", "Shift"]}

支持的特殊 KeyInput 类型： https://pptr.dev/api/puppeteer.keyinput

返回类型

您可以通过 output 参数过滤值，结果将以 JSON 字符串格式返回。您还可以通过 response_type 参数指定其他返回类型，例如 html、markdown。

输出过滤器

您可以使用 outputs 参数过滤 JSON 格式的数据。指定后，响应将固定为 JSON 字符串格式。此参数允许您精确定义要从抓取的 HTML 中提取哪些数据类型，从而能够高效地仅检索所需信息。通过这样做，您可以减少处理时间并专注于最符合您用例的相关数据。

此参数接受以逗号分隔的过滤器类型列表，并以结构化的 JSON 字符串格式返回结果。允许的过滤器类型包括：

phone_numbers, headings, images, audios, videos, links, menus, hashtags, emails, metadata, tables, favicon。

有关详细用法，请查看下面的代码。

const axios =require('axios');
const fs =require('fs');
 
(async () => {
    // 配置
    const url = "https://api.scrapeless.com/api/v1/unlocker/request";
    const token = "API Key";
 
    const headers = {"x-api-token": token, "Content-Type": "application/json"};
 
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true, // 必须为 true
            outputs: "phone_numbers, headings, images, audios, videos, links, menus, hashtags, emails, metadata, tables, favicon" // outputs 过滤器
        },
        proxy: {
            country: "ANY"
        }
    };
 
    try {
        const response = await axios.post(url, payload, {headers, timeout: 60000});
 
        if (response.status !== 200) {
            throw newError(`HTTP 错误: ${response.status}`);
        }
 
        const data = response.data;
        if (data.code !== 200) {
            throw newError(`API 错误: ${data}`);
        }
 
        const content = data.data || '';
 
        // 保存并返回结果
        fs.writeFileSync('response.json', content, 'utf8');
console.log('✅ 成功！内容已保存为 response.json');
 
        returnJSON.parse(content);
 
    } catch (error) {
console.error('❌ 错误:', error.message);
        throw error;
    }
})()

以下是一些示例：

电子邮件

使用 CSS 选择器和正则表达式提取标准格式的电子邮件地址，例如 example@example.com。

{
    "code": 200,
    "data": "{\"emails\":[\"market@scrapeless.com\"]}"
}
电话号码

使用 CSS 选择器和正则表达式提取电话号码，重点关注包含 tel: 协议的链接。

示例：outputs=phone_numbers

{
    "code": 200,
    "data": "{ \"phone_numbers\": [ \"+1-111-111-111\" ] }"
}
标题

从 HTML 中的 H1 到 H6 提取标题文本。

示例：outputs=headings

{
    "code": 200,
    "data": "{\"headings\":[\"Example Domain\"]}"
}
图片

从 img 标签中提取图像源。仅返回 src 属性。

示例：outputs=images

{
    "code": 200,
    "data": "{\"images\":[\"https://www.scrapeless.com/_next/image?url=%2Fassets%2Fimages%2Ftoolkit%2Flight%2Fimg-2.png&w=750&q=100\"]}"
}
音频

从 audio 标签内的 source 元素中提取音频源。仅返回 src 属性。

示例：outputs=audios

{
    "code": 200,
    "data": "{\"audios\":[\"https://example.com/audio.mp3\"]}"
}
视频

从 video 标签内的 source 元素中提取视频源。仅返回 src 属性。

示例：outputs=videos

{
    "code": 200,
    "data": "{\"videos\":[\"https://example.com/video.mp4\"]}"
}
链接

从 a 标签中提取 URL。仅返回 href 属性。

示例：outputs=links

{
    "code": 200,
    "data": "{\"links\":[\"https://app.scrapeless.com/landing/guide\",\"https://www.scrapeless.com/en\",\"https://www.scrapeless.com/en/pricing\",\"https://docs.scrapeless.com/\",\"https://backend.scrapeless.com/app/api\",\"https://www.producthunt.com/posts/scrapeless-deep-serpapi\",\"https://www.g2.com/products/scrapeless/reviews\",\"https://www.trustpilot.com/review/scrapeless.com\",\"https://slashdot.org/software/p/Scrapeless/\",\"https://tekpon.com/software/scrapeless/reviews/\",\"https://www.scrapeless.com/en/product/deep-serp-api\",\"https://www.scrapeless.com/en/product/scraping-browser\",\"https://www.scrapeless.com/en/product/scraping-api\",\"https://www.scrapeless.com/en/product/universal-scraping-api\",\"https://www.scrapeless.com/en/solutions/e-commerce\",\"https://www.scrapeless.com/en/solutions/seo\",\"https://www.scrapeless.com/en/solutions/real-estate\",\"https://www.scrapeless.com/en/solutions/travel-hotel-airline\",\"https://www.scrapeless.com/en/solutions/social-media\",\"https://www.scrapeless.com/en/solutions/market-research\",\"https://www.scrapeless.com/en/blog\",\"https://www.scrapeless.com/en/blog/deep-serp-api-online\",\"https://www.scrapeless.com/en/blog/scrapeless-web-scraping-toolkit\",\"https://www.scrapeless.com/en/blog/google-shopping-scrape\",\"https://backend.scrapeless.com/app/api/v1/public/links/github\",\"https://backend.scrapeless.com/app/api/v1/public/links/youtube\",\"mailto:market@scrapeless.com\",\"https://www.scrapeless.com/en/ai-agent\",\"https://browserless.scrapeless.com/\",\"https://www.scrapeless.com/en/solutions/temu\",\"https://www.scrapeless.com/en/solutions/walmart\",\"https://www.scrapeless.com/en/solutions/shopee\",\"https://www.scrapeless.com/en/solutions/lazada\",\"https://www.scrapeless.com/en/solutions/amazon\",\"https://www.scrapeless.com/en/solutions/google-trends\",\"https://www.scrapeless.com/en/solutions/google-search\",\"https://www.scrapeless.com/en/solutions/airbnb\",\"https://www.scrapeless.com/en/solutions/scoot\",\"https://www.scrapeless.com/en/solutions/latam\",\"https://www.scrapeless.com/en/solutions/localiza\",\"https://www.scrapeless.com/en/solutions/tiktok\",\"https://www.scrapeless.com/en/solutions/instagram\",\"https://www.scrapeless.com/en/integration\",\"https://www.scrapeless.com/en/faq\",\"https://www.scrapeless.com/en/glossary\",\"https://www.scrapeless.com/en/legal/privacy-policy\",\"https://www.scrapeless.com/en/legal/terms\",\"https://www.scrapeless.com/en/legal/terms#refund-policy\",\"https://www.scrapeless.com/en/legal/check-your-data\",\"https://backend.scrapeless.com/app/api/v1/public/links/discord\"]}"
}
菜单

从菜单标签内的 li 元素中提取菜单项。

示例：outputs=menus

{
    "code": 200,
    "data": "{\"links\":[ \"Coffee\", \"Tea\", \"Milk\" ]}"
}
标签

使用正则表达式提取标签格式以匹配典型的标签模式，例如 #example。

示例：outputs = hashtags

{
    "code": 200,
    "data": "{\"hashtags\":[\"#docsearch\",\"#search\"]}"
}
元数据

从 head 部分的 meta 标签中提取元信息，以 name: content 的格式返回 name 和 content 属性。

示例：outputs=metadata

{
    "code": 200,
    "data": "{\"metadata\":[\"viewport: width=device-width, initial-scale=1\",\"description: Scrapeless is the best full-stack web scraping toolkit offering Scraping API, Scraping Browser\"]}"
}
表格

从表格元素中提取数据，并以 JSON 格式返回表格数据，包括维度、标题和内容。

示例：outputs=tables

{
    "code": 200,
    "data": "{\"tables\":[{\"dimensions\":{\"rows\":7,\"columns\":3,\"heading\":true},\"heading\":[\"Company\",\"Contact\",\"Country\"],\"content\":[{\"Company\":\"Alfreds Futterkiste\",\"Contact\":\"Maria Anders\",\"Country\":\"Germany\"},{\"Company\":\"Centro comercial Moctezuma\",\"Contact\":\"Francisco Chang\",\"Country\":\"Mexico\"},{\"Company\":\"Ernst Handel\",\"Contact\":\"Roland Mendel\",\"Country\":\"Austria\"},{\"Company\":\"Island Trading\",\"Contact\":\"Helen Bennett\",\"Country\":\"UK\"},{\"Company\":\"Laughing Bacchus Winecellars\",\"Contact\":\"Yoshi Tannamuri\",\"Country\":\"Canada\"},{\"Company\":\"Magazzini Alimentari Riuniti\",\"Contact\":\"Giovanni Rovelli\",\"Country\":\"Italy\"}]},{\"dimensions\":{\"rows\":11,\"columns\":2,\"heading\":true},\"heading\":[\"Tag\",\"Description\"],\"content\":[{\"Tag\":\"<table>\",\"Description\":\"Defines a table\"},{\"Tag\":\"<th>\",\"Description\":\"Defines a header cell in a table\"},{\"Tag\":\"<tr>\",\"Description\":\"Defines a row in a table\"},{\"Tag\":\"<td>\",\"Description\":\"Defines a cell in a table\"},{\"Tag\":\"<caption>\",\"Description\":\"Defines a table caption\"},{\"Tag\":\"<colgroup>\",\"Description\":\"Specifies a group of one or more columns in a table for formatting\"},{\"Tag\":\"<col>\",\"Description\":\"Specifies column properties for each column within a <colgroup> element\"},{\"Tag\":\"<thead>\",\"Description\":\"Groups the header content in a table\"},{\"Tag\":\"<tbody>\",\"Description\":\"Groups the body content in a table\"},{\"Tag\":\"<tfoot>\",\"Description\":\"Groups the footer content in a table\"}]}]}"
}
网站图标

从 HTML head 部分的 link 元素中提取网站图标 URL。

示例：outputs = favicon

{
    "code": 200,
    "data": "{\"favicon\":\"https://www.scrapeless.com/favicon.ico\"}"
}

其他格式

除了通过 outputs 参数过滤 JSON 数据外，您还可以通过指定 response_type 参数来指定更多返回值类型。可选值为：html | plaintext | markdown | png/jpeg，默认值为 html。详情如下：

HTML

用于提取页面的 HTML 内容，最适合纯静态页面，并以转义的 HTML 字符串格式返回内容。

在请求中添加 response_type=html：

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true,
            response_type: "html"
        },
        proxy: {
            country: "ANY"
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v1/unlocker/request", payload, {
        headers: {
            "x-api-token": "API Key",
            "Content-Type": "application/json"
        },
        timeout: 60000
    });
 
    if (response.data?.code === 200) {
        fs.writeFileSync('response.html', response.data.data, 'utf8');
    }
})();

返回 HTML 格式的文本内容。

{
    "code": 200,
    "data": "<!DOCTYPE html><html><head>\n    <title>Example Domain</title>\n\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <style type=\"text/css\">\n    body {\n        background-color: #f0f0f2;\n        margin: 0;\n        padding: 0;\n        font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n        \n    }\n    div {\n        width: 600px;\n        margin: 5em auto;\n        padding: 2em;\n        background-color: #fdfdff;\n        border-radius: 0.5em;\n        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);\n    }\n    a:link, a:visited {\n        color: #38488f;\n        text-decoration: none;\n    }\n    @media (max-width: 700px) {\n        div {\n            margin: 0 auto;\n            width: auto;\n        }\n    }\n    </style>    \n</head>\n\n<body>\n<div>\n    <h1>Example Domain</h1>\n    <p>This domain is for use in illustrative examples in documents. You may use this\n    domain in literature without prior coordination or asking for permission.</p>\n    <p><a href=\"https://www.iana.org/domains/example\">More information...</a></p>\n</div>\n\n\n</body></html>"
}

保存后的 HTML 文件示例内容：

<!DOCTYPE html><html><head>
    <title>Example Domain</title>
 
    <meta charset="utf-8">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
    }
    div {
        width: 600px;
        margin: 5em auto;
        padding: 2em;
        background-color: #fdfdff;
        border-radius: 0.5em;
        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        div {
            margin: 0 auto;
            width: auto;
        }
    }
    </style>
</head>
 
<body>
<div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
 
</body></html>
纯文本

纯文本功能是一个输出选项，它以纯文本格式而不是 HTML 或 Markdown 格式返回抓取的内容。当需要内容的简洁、无格式版本（没有任何 HTML 标签或 Markdown 格式）时，此功能非常实用。它简化了内容提取过程，使文本处理或分析更加方便。

在请求中添加 response_type=plaintext：

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true,
            response_type: "plaintext"
        },
        proxy: {
            country: "ANY"
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v1/unlocker/request", payload, {
        headers: {
            "x-api-token": "API Key",
            "Content-Type": "application/json"
        },
        timeout: 60000
    });
 
    if (response.data?.code === 200) {
        fs.writeFileSync('response.txt', response.data.data, 'utf8');
    }
})();

返回页面的纯文本内容作为字符串。请参见下面的示例。

{
    "code": 200,
    "data": "Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\nMore information..."
}

保存后的 txt 文件示例内容：

Example Domain

This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.

More information...
Markdown

对于以 Markdown 格式提取页面内容，纯静态 Markdown 页面效果最佳。通过在请求参数中添加 response_type=markdown，通用抓取 API 将以 Markdown 格式返回内容，使其更易于阅读和处理。

在请求中添加 response_type=markdown：

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true,
            response_type: "markdown"
        },
        proxy: {
            country: "ANY"
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v1/unlocker/request", payload, {
        headers: {
            "x-api-token": "API Key",
            "Content-Type": "application/json"
        },
        timeout: 60000
    });
 
    if (response.data?.code === 200) {
        fs.writeFileSync('response.md', response.data.data, 'utf8');
    }
})();

返回 Markdown 格式的文本内容。

{
    "code": 200,
    "data": "# Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\n[More information...](https://www.iana.org/domains/example)"
}

保存后的 Markdown 文件示例内容：

# Example Domain
 
This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.
 
[More information...](https://www.iana.org/domains/example)
PNG/JPEG

通过在请求中添加 response_type=png，您可以捕获目标页面的屏幕截图并以 PNG 或 JPEG 格式返回图像。当响应结果设置为 PNG 或 JPEG 时，您可以使用 response_image_full_page=true 参数指定返回的结果是否为全页截图。response_image_full_page 参数的默认值为 false。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true,
            response_type: "png", // png or jpeg
            response_image_full_page: true
        },
        proxy: {
            country: "ANY"
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v1/unlocker/request", payload, {
        headers: {
            "x-api-token": "API Key",
            "Content-Type": "application/json"
        },
        timeout: 60000
    });
 
    if (response.data?.code === 200) {
        fs.writeFileSync('response.png',Buffer.from(response.data.data, 'base64'));
    }
})();

返回一个base64编码的PNG或JPEG格式字符串。

{
    "code": 200,
    "data": "JVBERi0xLjQKJdPr6eEKM..."
}

保存为png/jpeg后的示例文件：

资源控制

用于优化性能和带宽使用的资源加载控制系统。

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": true,
    "block": {
      "resources": [
        "Image",
        "Font",
        "Stylesheet",
        "Script"
      ],
      "urls": [
        // 可选，基于URL模式的阻塞
        "*.analytics.com/*",
        "*/ads/*"
      ]
    }
  }
}

完整的资源类型参考：

资源类型描述影响
Document主文档和iframe核心页面内容
StylesheetCSS文件页面样式和布局
Image图片和图标可视化内容
Media音频和视频资源多媒体内容
Font网络字体文本渲染
ScriptJavaScript文件页面功能
TextTrack视频字幕和隐藏字幕媒体辅助功能
XHRXMLHttpRequest调用传统异步请求
FetchFetch API请求现代异步请求
Prefetch预取资源性能优化
EventSource服务器发送事件实时更新
WebSocketWebSocket连接双向通信
ManifestWeb应用清单PWA配置
SignedExchange已签名的HTTP交换内容真实性
PingPing请求分析和跟踪
CSPViolationReportCSP违规报告安全监控
PreflightCORS预检请求跨域安全
Other未分类资源其他

使用方法示例：

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": true,
    "block": {
      "resources": [
        "Image",
        "Font",
        "Stylesheet",
        "Script",
        "Media",
        "Ping",
        "Prefetch"
      ]
    }
  }
}

资源阻塞最佳实践：

  1. 性能优化

    • 仅在必要时启用js_render
    • 明智地使用资源阻塞，阻塞不必要的资源以加快加载速度
    • 考虑阻塞Prefetch和Ping以减少网络使用
    • 保持Document和关键Script资源不被阻塞

  2. 带宽管理

    • 对于带宽密集型页面，阻塞Image和Media
    • 考虑阻塞Font以使用系统字体

  3. 稳定性增强

    • 实现请求重试机制
    • 添加错误处理逻辑
    • 使用wait_for代替固定的wait

  4. 资源效率

    • 按需加载资源
    • 及时关闭不必要的连接

注意： 资源类型字符串区分大小写。使用与参考表中所示完全匹配的字符串。

入门验证码解决