> For the complete documentation index, see [llms.txt](https://developers.oxylabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.oxylabs.io/products/cn/web-unblocker/custom-browser-instructions/javascript-rendering.md).
# JavaScript 渲染
了解可在请求中包含的请求头，以获取完整渲染的数据，并可将其保存为 HTML 文件或 PNG 截图。
如果你要抓取的页面需要加载 JavaScript 以将所有所需数据动态加载到 DOM 中，你可以不自己设置和使用无头浏览器，而是包含 `"X-Oxylabs-Render: html"` 请求头到你的请求中。所有包含此请求头的请求都会被完整渲染，所有数据将根据传入的参数存储为 HTML 文件或 PNG 截图。
{% hint style="info" %}
JavaScript 渲染抓取页面所需时间更长。使用 JavaScript 渲染时，请将客户端超时值设置为 180 秒。
{% endhint %}
{% hint style="warning" %}
为确保最低流量消耗，我们的系统在页面渲染期间不会加载不必要的资源。
{% endhint %}
此参数有两个可用值：
* `html` (渲染后页面的 HTML)
* `png` (可保存为 PNG 的原始字节)
#### 代码示例
{% tabs %}
{% tab title="cURL" %}
```shell
curl -k -v -x https://unblock.oxylabs.io:60000 \
-U 'USERNAME:PASSWORD' \
'https://ip.oxylabs.io/location' \
-H 'X-Oxylabs-Render: html'
```
{% endtab %}
{% tab title="Python" %}
```python
import requests
# 在此使用你的网页解锁器凭据。
USERNAME, PASSWORD = 'YOUR_USERNAME', 'YOUR_PASSWORD'
# 定义代理字典。
代理 = {
'http': f'http://{USERNAME}:{PASSWORD}@unblock.oxylabs.io:60000',
'https': f'https://{USERNAME}:{PASSWORD}@unblock.oxylabs.io:60000',
}
headers = {
'X-Oxylabs-Render': 'html'
}
response = requests.get(
'https://ip.oxylabs.io/location',
verify=False, # 需要忽略证书
代理=代理,
headers=headers,
)
# Print result page to stdout
print(response.text)
# Save returned HTML to result.html file
with open('result.html', 'w') as f:
f.write(response.text)
```
{% endtab %}
{% tab title="Node.js" %}
```javascript
import fetch from 'node-fetch';
import { HttpsProxyAgent } from 'https-proxy-agent';
const username = 'YOUR_USERNAME';
const password = 'YOUR_PASSWORD';
const agent = new HttpsProxyAgent(
`https://${username}:${password}@unblock.oxylabs.io:60000`
);
// 我们建议接受我们的证书，而不是允许不安全的 (http) 流量
process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = 0;
const headers = {
'X-Oxylabs-Render': 'html',
}
const response = await fetch('https://ip.oxylabs.io/location', {
method: 'get',
headers: headers,
agent: agent,
});
console.log(await response.text());
```
{% endtab %}
{% tab title="PHP" %}
```php
array(
'X-Oxylabs-Render: html'
)
));
$result = curl_exec($ch);
echo $result;
if (curl_errno($ch)) {
echo '错误:' . curl_error($ch);
}
curl_close($ch);
```
{% endtab %}
{% tab title="Go语言" %}
```go
package main
import (
"crypto/tls"
"fmt"
"io/ioutil"
"net/http"
"net/url"
)
func main() {
const Username = "YOUR_USERNAME"
const Password = "YOUR_PASSWORD"
proxyUrl, _ := url.Parse(
fmt.Sprintf(
"https://%s:%s@unblock.oxylabs.io:60000",
Username,
Password,
),
)
customTransport := &http.Transport{Proxy: http.ProxyURL(proxyUrl)}
// 我们建议接受我们的证书，而不是允许不安全的 (http) 流量
customTransport.TLSClientConfig = &tls.Config{InsecureSkipVerify: true}
client := &http.Client{Transport: customTransport}
request, _ := http.NewRequest("GET",
"https://ip.oxylabs.io/location",
nil,
)
// 添加自定义 Cookie
request.Header.Add("X-Oxylabs-Render", "html")
request.SetBasicAuth(Username, Password)
response, _ := client.Do(request)
responseText, _ := ioutil.ReadAll(response.Body)
fmt.Println(string(responseText))
}
```
{% endtab %}
{% tab title="C#" %}
```csharp
using System;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
namespace OxyApi
{
class Program
{
static async Task Main(string[] args)
{
var webProxy = new WebProxy
{
Address = new Uri("https://unblock.oxylabs.io:60000"),
BypassProxyOnLocal = false,
UseDefaultCredentials = false,
Credentials = new NetworkCredential(
userName: "YOUR_USERNAME",
password: "YOUR_PASSWORD"
)
};
var httpClientHandler = new HttpClientHandler
{
Proxy = webProxy,
};
// 我们建议接受我们的证书，而不是允许不安全的 (http) 流量
httpClientHandler.ClientCertificateOptions = ClientCertificateOption.Manual;
httpClientHandler.ServerCertificateCustomValidationCallback =
(httpRequestMessage, cert, cetChain, policyErrors) =>
{
return true;
};
var client = new HttpClient(handler: httpClientHandler, disposeHandler: true);
// 添加自定义 Cookie
client.DefaultRequestHeaders.Add("X-Oxylabs-Render", "html");
Uri baseUri = new Uri("https://ip.oxylabs.io/location");
client.BaseAddress = baseUri;
var requestMessage = new HttpRequestMessage(HttpMethod.Get, "");
var response = await client.SendAsync(requestMessage);
var contents = await response.Content.ReadAsStringAsync();
Console.WriteLine(contents);
}
}
}
```
{% endtab %}
{% tab title="Java" %}
```java
package org.example;
import org.apache.hc.client5.http.auth.AuthScope;
import org.apache.hc.client5.http.auth.CredentialsProvider;
import org.apache.hc.client5.http.classic.methods.HttpGet;
import org.apache.hc.client5.http.config.RequestConfig;
import org.apache.hc.client5.http.impl.auth.CredentialsProviderBuilder;
import org.apache.hc.client5.http.impl.classic.CloseableHttpClient;
import org.apache.hc.client5.http.impl.classic.HttpClients;
import org.apache.hc.client5.http.impl.io.PoolingHttpClientConnectionManagerBuilder;
import org.apache.hc.client5.http.ssl.NoopHostnameVerifier;
import org.apache.hc.client5.http.ssl.SSLConnectionSocketFactoryBuilder;
import org.apache.hc.client5.http.ssl.TrustAllStrategy;
import org.apache.hc.core5.http.HttpHost;
import org.apache.hc.core5.http.io.entity.EntityUtils;
import org.apache.hc.core5.http.message.StatusLine;
import org.apache.hc.core5.ssl.SSLContextBuilder;
import java.util.Arrays;
import java.util.Properties;
public class Main {
public static void main(final String[] args)throws Exception {
final CredentialsProvider credsProvider = CredentialsProviderBuilder.create()
.add(new AuthScope("unblock.oxylabs.io", 60000), "USERNAME", "PASSWORD".toCharArray())
.build();
final HttpHost target = new HttpHost("https", "ip.oxylabs.io", 443);
final HttpHost proxy = new HttpHost("https", "unblock.oxylabs.io", 60000);
try (final CloseableHttpClient httpclient = HttpClients.custom()
.setDefaultCredentialsProvider(credsProvider)
.setProxy(proxy)
// 我们建议接受我们的证书，而不是允许不安全的 (http) 流量
.setConnectionManager(PoolingHttpClientConnectionManagerBuilder.create()
.setSSLSocketFactory(SSLConnectionSocketFactoryBuilder.create()
.setSslContext(SSLContextBuilder.create()
.loadTrustMaterial(TrustAllStrategy.INSTANCE)
.build())
.setHostnameVerifier(NoopHostnameVerifier.INSTANCE)
.build())
.build())
.build()) {
final RequestConfig config = RequestConfig.custom()
.build();
final HttpGet request = new HttpGet("/location");
request.addHeader("X-Oxylabs-Render","html");
request.setConfig(config);
System.out.println("Executing request " + request.getMethod() + " " + request.getUri() +
" via " + proxy + " headers: " + Arrays.toString(request.getHeaders()));
httpclient.execute(target, request, response -> {
System.out.println("----------------------------------------");
System.out.println(request + "->" + new StatusLine(response));
EntityUtils.consume(response.getEntity());
return null;
});
}
}
}
```
{% endtab %}
{% endtabs %}
**抓取网站 HTML**
在这个示例中，我们将渲染 YouTube 首页并抓取页面内容。通常，如果在不使用 JavaScript 渲染的情况下使用网页解锁器，YouTube 首页会像这样：
未使用 JavaScript 渲染的 YouTube 页面示例
using System;
using System.Net;
using System.Net.Http;
using System.Drawing;
using System.IO;
using System.Threading.Tasks;
namespace OxyApi
{
class Program
{
static async Task Main(string[] args)
{
var webProxy = new WebProxy
{
Address = new Uri("https://unblock.oxylabs.io:60000"),
BypassProxyOnLocal = false,
UseDefaultCredentials = false,
Credentials = new NetworkCredential(
userName: "YOUR_USERNAME",
password: "YOUR_PASSWORD"
)
};
var httpClientHandler = new HttpClientHandler
{
Proxy = webProxy,
};
// 我们建议接受我们的证书，而不是允许不安全的 (http) 流量
httpClientHandler.ClientCertificateOptions = ClientCertificateOption.Manual;
httpClientHandler.ServerCertificateCustomValidationCallback =
(httpRequestMessage, cert, cetChain, policyErrors) =>
{
return true;
};
var client = new HttpClient(handler: httpClientHandler, disposeHandler: true);
// Add custom header
client.DefaultRequestHeaders.Add("X-Oxylabs-Render", "png");
Uri baseUri = new Uri("https://youtube.com");
client.BaseAddress = baseUri;
var requestMessage = new HttpRequestMessage(HttpMethod.Get, "");
var response = await client.SendAsync(requestMessage);
byte[] bytes = await response.Content.ReadAsByteArrayAsync();
using (Image image = Image.FromStream(new MemoryStream(bytes)))
{
image.Save("rendered_page.png");
}
}
}
}
以 PNG 格式截图的 YouTube 页面示例
&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
