UnhandledPromiseRejectionWarning：错误：评估失败：ReferenceError：未定义选项答案

【问题标题】：UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: options is not definedUnhandledPromiseRejectionWarning：错误：评估失败：ReferenceError：未定义选项
【发布时间】：2021-03-26 06:22:47
【问题描述】：

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const options = ["iframe"]
const url = 'https://www.loungeincomfort.com.au/'
const page = await browser.newPage();
await page.goto(url);
for (var i = 0; i < options.length; i++) {
    const frame = await page.$$eval(options[i], e => e.map(a => {
        const attrs = a.getAttributeNames();
        const len = attrs.length;
        const test = {};
        for (var i = 0; i < len; i++) {
            //test[attrs[i]].push({ label: "Hello World" })
            test[attrs[i]] = a.getAttribute(attrs[i])
        }
        return test;
    }))
    console.log(frame);
}
await browser.close();
})();

输出是这样的：

    [
    {
    "width": "640",
    "height": "360",
    "src": "https://www.youtube.com/embed/ZJPsDBCD4XU",
    "frameborder": "0",
    "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
    "allowfullscreen": ""
    }
    ]

我想将 options[i] 和我在代码中添加的 url 添加到输出中

        const test = {
             "object": options[i],
             "page": url
         };

但我收到一个错误，即未定义选项，如果我删除了“对象”，我会收到与 url 相同的错误：options[i],

我应该怎么做才能解决这个错误？

所以我的输出还有另一个问题

输出是这样的：

[{
    "width": "1170",
    "height": "490",
    "style": "visibility: visible; width: 100%; margin-left: 0px; height: 301.538px; margin-top: -3.26923px; position: absolute;"
}]

我想将样式输出分离成对象，就像这样

我对此进行了一些研究，但找不到任何有用的东西

[{
    "width": "1170",
    "height": "490",
    "style": {
           "visibility": "visible",
           "width": "100%",
           "margin-left": "0px",
           "height": "301.538px",
           "margin-top": "-3.26923px",
            "position": "absolute"

}}]

提前致谢:)

【问题讨论】：

标签： javascript node.js json object puppeteer

【解决方案1】：

您尝试添加options[i] 的代码是客户端代码 Puppeteer 在无头浏览器中运行（“页面功能”）。 options 那里不存在。

根据the documentation，您可以让 Puppeteer 将该值作为参数传递给页面函数，因此：

    const frame = await page.$$eval(options[i], (e, object, page) => e.map(a => {
//                                              ^ ^^^^^^^^^^^^^^
        const attrs = a.getAttributeNames();
        const len = attrs.length;
        const test = {object, page};
//                    ^^^^^^^^^^^^
        for (var i = 0; i < len; i++) {
            //test[attrs[i]].push({ label: "Hello World" })
            test[attrs[i]] = a.getAttribute(attrs[i])
        }
        return test;
    }), options[i], url)
//    ^^^^^^^^^^^^^^^^^

【讨论】：

我已经更新了我的问题，你能看看你是否能帮助我？
@MohamedEssam - 您的编辑提出了一个完全不同的问题。请将其作为自己的问题发布。（简短的回答是：循环遍历元素 [a.style] 的 style 属性上的属性，而不是查看 style 属性 [a.getAttribute(...)] 中的字符串。）

【解决方案2】：

这应该可以解决您的问题：

const browser = await puppeteer.launch();
    const options = ["iframe"];
    const url = "https://www.loungeincomfort.com.au/";
    const page = await browser.newPage();
    await page.goto(url);
    for (var i = 0; i < options.length; i++) {
      const object = options[i];
      const frame = await page.$$eval(
        options[i],
        (e, { url, object }) =>
          e.map((a) => {
            const attrs = a.getAttributeNames();
            const len = attrs.length;
            const test = { object, page: url };
            for (var i = 0; i < len; i++) {
              //test[attrs[i]].push({ label: "Hello World" })
              test[attrs[i]] = a.getAttribute(attrs[i]);
            }
            return test;
          }),
        { url, object }
      );
      console.log(frame);
    }
    await browser.close();

说明：将 url 和 object 作为附加参数传递给 $$eval

【讨论】：