Nodejs 如何获取到网页执行完js之后的代码

Nodejs 如何获取到网页执行完js之后的代码

需求：获取一个网页执行完JS之后的代码：一个页面里面有JS代码，执行完会改变html结构。现在需要获取执行完的代码。 想着用node.js去执行里面的js。找到一个模块https://github.com/tmpvar/jsdom ，应该可以实现，但是卡住了。英文不好。看的费劲啊。。。各位大侠帮帮忙。。

5 回复

当然可以！为了实现这个需求，我们可以使用 puppeteer 这个强大的 Node.js 库。puppeteer 是 Google 开发的一个库，它提供了一组高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium 浏览器。它非常适合用来抓取 SPA（单页应用）和动态渲染的内容。

示例代码

const puppeteer = require('puppeteer');

async function getRenderedHTML(url) {
    // 启动一个新的浏览器实例
    const browser = await puppeteer.launch();
    
    // 打开一个新的页面
    const page = await browser.newPage();
    
    // 导航到目标 URL
    await page.goto(url, { waitUntil: 'networkidle2' });

    // 获取执行完 JS 后的 HTML
    const content = await page.content();

    // 打印出 HTML
    console.log(content);

    // 关闭浏览器
    await browser.close();
}

// 调用函数并传入目标 URL
getRenderedHTML('http://example.com');

解释

  1. 启动浏览器：使用 puppeteer.launch() 方法来启动一个新的浏览器实例。这将打开一个新的无头 Chrome 浏览器窗口（除非你显式地设置 headless: false）。

  2. 创建新页面：使用 browser.newPage() 方法来创建一个新的页面对象。

  3. 导航到目标 URL：使用 page.goto(url) 方法导航到指定的 URL，并等待网络请求完成（waitUntil: 'networkidle2' 表示当有两个或更少的连接处于非空闲状态时认为页面加载完成）。

  4. 获取执行后的 HTML：使用 page.content() 方法获取当前页面的 HTML 内容，此时 JavaScript 已经执行完毕，HTML 结构已经被更新。

  5. 关闭浏览器：最后使用 browser.close() 关闭浏览器实例以释放资源。

通过这种方式，你可以轻松地获取到网页执行完 JavaScript 后的完整 HTML 结构。希望这个示例对你有所帮助！


我用 jsdom + jquery, 就可以遍历当前得 DOM 结构。

你需要PhantomJS

谢谢各位，用PhantomJS搞定了。 var page = require(‘webpage’).create(); page.open(“YOUR URL”, function() { var text = page.evaluate(function () { return document.body.innerHTML; }); console.log(text); phantom.exit(); });

要获取一个网页执行完JavaScript后的HTML代码，可以使用puppeteer库，它提供了更高级别的API来控制浏览器行为，包括执行JavaScript并获取最终渲染的DOM。

示例代码

const puppeteer = require('puppeteer');

async function getRenderedHTML(url) {
    // 启动一个新的浏览器实例
    const browser = await puppeteer.launch();
    // 打开一个新的页面
    const page = await browser.newPage();
    
    // 访问目标URL
    await page.goto(url, { waitUntil: 'networkidle2' });

    // 获取页面执行完JavaScript后的HTML内容
    const content = await page.content();

    // 关闭浏览器
    await browser.close();

    return content;
}

// 使用示例
const url = 'http://example.com';
getRenderedHTML(url).then(html => {
    console.log(html);
}).catch(error => {
    console.error('Error:', error);
});

解释

  1. 安装puppeteer: 首先确保已经安装了puppeteer库。可以通过以下命令安装：

    npm install puppeteer

  2. 启动浏览器: puppeteer.launch() 方法用于启动一个新的浏览器实例。

  3. 打开页面: browser.newPage() 创建一个新的页面对象，然后通过 page.goto(url) 访问指定的URL。

  4. 等待资源加载完成: waitUntil: 'networkidle2' 表示等待直到网络空闲，即没有更多的请求或下载，且只有两分钟内没有新的网络活动。

  5. 获取渲染后的HTML: page.content() 方法用于获取当前页面的HTML内容。

  6. 关闭浏览器: 使用 await browser.close() 关闭浏览器实例。

这样就可以获取到网页执行完JavaScript之后的完整HTML代码。

回到顶部