如何使用 puppeteer 将抓取数据添加到 html 中

Question

建议：这是我第一次尝试。

我创建了一个显示巴士时间的 html 页面。为了获得巴士时刻表，我不得不用 puppeteer 搜索当地的巴士服务网站。我确实正确地为下一辆公共汽车节省了时间，但我似乎无法将其添加到我的 html 页面中。

我尝试添加脚本标签，其中 src 指向我的 js 文件。我尝试将它们添加到头部，在应该显示时间的 div 中和结束正文标记之前，但我无法显示时间。我尝试将脚本标签中的 js 添加到 html 中，但没有成功。

//Here's code for scraping in busTimeScraper.js :
  let scrape = async() => {
  const browser = await puppeteer.launch({
    headless: true
  });
  const page = await browser.newPage();
  await page.goto('bustimes.com');    //Dummy website for this eg
  await page.setViewport({width: 1500, height: 1500})
  await page.waitFor(5000);

  const result = await page.evaluate(() => {
     let time = document.querySelector('#RouteTimetable').innerText;
     return {
        time
     }
 });

 browser.close();
 return result;

 };

 scrape().then((value) => {
    var timing = value.time;
    document.querySelector('#Time').innerText=timing;
 });

//The html is :
 <div id="Time">
  <!--<script type="text/javascript" src="busTimeScraper.js">
          </script>-->
 </div>

当我运行 js 文件并对时间变量执行 console.log 时，我可以看到正在抓取的时间。我希望 div 填充相同的时间值，但它只是保持空白

Answer 1

您根本无法使用脚本标记在客户端 html 中添加服务器端 JS，并期望它能够正常工作，无论您在何处添加（在头部、内部元素或关闭正文之前）；

最简单的解决方案是通过 NodeJsAPI 公开结果（计时变量）并通过客户端 JS 使用 API 以获取值并执行其余的客户端操作。