将 HTML 作为字符串加载时未获取 href 的值答案

【问题标题】：Not getting the value of href when loading HTML as string将 HTML 作为字符串加载时未获取 href 的值
【发布时间】：2020-03-16 03:53:38
【问题描述】：

我正在尝试将 HTML 字符串加载到 puppeteer 中并获取所有 <link> 标签。但是，当 HTML 字符串中有带有 href 值的 <link> 标记时，我得到了空的 <links 集。

我从 view-source:https://redis.io/ 复制了 HTML 代码作为字符串并将字符串提取为：

    async function main() {
        const puppeteer = require("puppeteer");
        const browser = await puppeteer.launch({args: ["--no-sandbox"]});
        const page = await browser.newPage();
        await page.setContent(html);

        await page.screenshot({path:"s.png"});
        const links = await page.$$eval('link', links => links.map(link => link.href))

        const singleLink = await page.$eval('link', link => link.href);
        console.log(singleLink)
        console.log(links);

        browser.close();
}

main()
        .then(() => {})
        .catch(err => console.log(err))

但我得到了 links 的空列表。这可能是什么原因？

【问题讨论】：

标签： javascript node.js puppeteer google-chrome-headless

【解决方案1】：

href 是anchor 的属性。如果您想从link 元素中获取href，则需要使用getAttribute。

const links = await page.$$eval('link', links => links.map(link => link.getAttribute('href')))

【讨论】：

如果我使用page.goto加载HTML，它工作得很好
你知道区别吗？
这可能与这些链接在头部的事实有关。当您注入 HTML 时，Chrome 可能会有不同的反应
请记住，setContent 只不过是一个执行 document.open(); 的 javascript 函数； document.write(html); document.close();