通过AJAX加载SPA网页

Question

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

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

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());

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

// 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());
});

我在这里尝试了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上完全加载网页的选项是什么？

Answer 1

您永远无法完全复制任意(SPA)页面所做的事情。

我看到的唯一方法是使用无头浏览器，如PhantomJS、headless Chrome或headless Firefox。

我想试试无头Chrome，让我们看看它能用你的页面做什么：

% 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"}}

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

在新目录中：

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