我试图通过插入 URL 使用 JavaScript 获取整个网页。但是，该网站构建为使用 JavaScript/backbone.js 的单页应用程序 (SPA)在呈现初始响应后动态加载大部分内容。

例如，当我路由到以下地址时:

https://connect.garmin.com/modern/activity/1915361012

然后将其输入控制台(在页面加载后):

var $page = $("html")
console.log("%c✔: ", "color:green;", $page.find(".inline-edit-target.page-title-overflow").text().trim());
console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());

然后我将获得动态加载的事件标题以及静态加载的页脚:

但是，当我尝试通过 AJAX 调用加载网页时 $.get()或 .load() ，我只收到初始响应(与查看源代码时的内容相同):

view-source:https://connect.garmin.com/modern/activity/1915361012

因此，如果我使用以下任一 AJAX 调用:

// jQuery.get()
var url = "https://connect.garmin.com/modern/activity/1915361012";
jQuery.get(url,function(data) {
    var $page = $("<div>").html(data)
    console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim());
    console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
});

// jQuery.load()
var url = "https://connect.garmin.com/modern/activity/1915361012";
var $page = $("<div>")
$page.load(url, function(data) {
    console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim()    );
    console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
});

我仍然会得到初始页脚，但不会得到任何其他页面内容:

我试过 solution here到 eval() 每个 script 标签的内容，但这看起来不够健壮，无法实际加载页面:

jQuery.get(url,function(data) {
    var $page = $("<div>").html(data)
    $page.find("script").each(function() {
        var scriptContent = $(this).html(); //Grab the content of this tag
        eval(scriptContent); //Execute the content
    });
    console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim());
    console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
});

问:是否有任何选项可以完全加载可通过 JavaScript 抓取的网页？

最佳答案

您永远无法完全复制任意 (SPA) 页面的功能。

我看到的唯一方法是使用 headless 浏览器，例如 PhantomJS或 Headless Chrome , 或 Headless Firefox .

我想试用 Headless Chrome，让我们看看它能为您的页面做些什么:

使用内部 REPL 快速检查

使用 Chrome Headless 加载该页面(在 Mac/Linux 上需要 Chrome 59，在 Windows 上需要 Chrome 60)，并从 REPL 中找到带有 JavaScript 的页面标题:

% chrome --headless --disable-gpu --repl https://connect.garmin.com/modern/activity/1915361012
[0830/171405.025582:INFO:headless_shell.cc(303)] Type a Javascript expression to evaluate or "quit" to exit.
>>> $('body').find('.page-title').text().trim() 
{"result":{"type":"string","value":"Daily Mile - Round 2 - Day 27"}}

注意:为了让 chrome 命令行在 Mac 上工作，我事先做了这个:

alias chrome="'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'"

以编程方式使用 Node 和 Puppeteer

Puppeteer is a Node library (by Google Chrome developers) which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome.

(第 0 步:如果没有安装 Node 和 Yarn)

在新目录中:

yarn init
yarn add puppeteer

用这个创建 index.js:

const puppeteer = require('puppeteer');
(async() => {
    const url = 'https://connect.garmin.com/modern/activity/1915361012';
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    // Go to URL and wait for page to load
    await page.goto(url, {waitUntil: 'networkidle'});
    // Wait for the results to show up
    await page.waitForSelector('.page-title');
    // Extract the results from the page
    const text = await page.evaluate(() => {
        const title = document.querySelector('.page-title');
        return title.innerText.trim();
    });
    console.log(`Found: ${text}`);
    browser.close();
})();

结果:

$ node index.js 
Found: Daily Mile - Round 2 - Day 27

关于javascript - 通过 AJAX 加载 SPA 网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45679862/