HTML 更改输入元素的值，当值元素已经为空时答案

【问题标题】：HTML change value of input Element, when value element already empty existingHTML 更改输入元素的值，当值元素已经为空时
【发布时间】：2021-03-30 17:03:05
【问题描述】：

您好，我想填写一个输入元素。

<input id="cardpan" type="text" data-style="height: 31px; width: 215px; font-size: 15px; background: #fff; padding: 0 4px; border: 1px solid #d9d9d9; box-shadow: inset 1px 1px 3px rgba(0,0,0,.05);" value="" autocomplete="off" style="height: 31px; width: 215px; font-size: 15px; background: rgb(255, 255, 255); padding: 0px 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.05) 1px 1px 3px inset;">

现在当我尝试这个时：

const ccnumber = document.querySelector('#cardpan input[type = text]');
ccnumber.value = '213123132';

在控制台中，我得到输出：Uncaught SyntaxError: Identifier 'ccnumber' has been declared。使用 puppeteer (headless chrome) 它不会填写任何内容。

我该怎么做？这是因为该值已被声明为 value=" "？

感谢您的帮助 :)

【问题讨论】：

元素在 iframe 中。您需要使用此 iframe 的文档，而不是顶部窗口的文档。如果您已经使用它，也许值得提供更多代码。
啊，不，我不知道。对不起，我几天前开始这样做，我还在学习。如何在 iframe 中选择元素（在本例中为输入字段）？

标签： javascript html css puppeteer

【解决方案1】：

我终于解决了：

 const elementHandle = await page.$('span#cardpan iframe');
 const frame = await elementHandle.contentFrame();
 await frame.evaluate(() => {
   const mach = document.querySelector('input[type=text]');
   mach.value = '9999999999999';
             
 });

【讨论】：

【解决方案2】：

const ccnumber = document.querySelector('#cardpan'); ccnumber.value = '213123132'; 试试看？

【讨论】：

我添加了页面截图，包括 HTML 代码，我试图在其中插入值。

【解决方案3】：

您需要先找到一个 iframe，然后在评估中使用它。像这样的：

const frame = page.frames().find(
  f => f.url().startsWith('https://secure.pay1.de/')
);

await frame.evaluate(() => {
  const ccnumber = document.querySelector('#cardpan');
  ccnumber.value = '213123132';
});

【讨论】：

问题是，每个输入字段都有一个单独的 iframe。所以有多个 iframe，这就是您的解决方案无法正常工作的原因。（我的错，如果你在屏幕截图上看不到这个，对不起。）如果你想重现这个，去 notebooksbilliger.de 并尝试检查一个随机产品，选择信用卡支付，最后一步你会进入这个窗口.
我现在试过了：console.log(document.getElementsByTagName('iframe')[1])。我的代码如下所示：var iframe = document.getElementsByTagName("iframe")[1]; var elmnt = iframe.contentWindow.document.getElementById("cardpan"); await page.waitForSelector(elmnt); await frame.evaluate(() => { elmnt.value = '213123132'} but 它仍然无法正常工作...
您正在混合 puppeteer 和浏览器代码。 document.getElementsByTagName 仅在浏览器上下文中可用，而 page.waitForSelector 仅在 puppeteer 上下文中可用。另外，document.getElementById 返回 DOM 元素，而 page.waitForSelector 需要字符串。
嗯嗯好的。说得通。是否有机会选择特定的 iframe 元素？因为有多个以 ('secure.pay1.de/') 开头
试过这个：const elementHandle = await page.$('span#cardpan iframe'); const frame = await elementHandle.contentFrame(); await frame.evaluate(() => { const mach = document.querySelector('input[id="cardpan"]'); mach.value = '9999999999999'; }); 不工作