Puppeteer 从 Node 中监听 map.on('load') [英] Puppeteer to listen for map.on('load') from within Node

问题描述

使用 Puppeteer 从 Node 中监听 map.on('load').

Using Puppeteer to listen for map.on('load') from within Node.

(async () => {
  const browser = await puppeteer.launch({ headless: false, devtools: true });
  const page = await browser.newPage();

  function nodeLog(msg) {
    console.log(msg);
  }

  page.on('load', async () => {
    await page.evaluate(() => {
      window.map.on('load', () => {
        console.log("This runs on the index.html js but I do not need that");
        nodeLog("WHY IS THIS NOT WORKING??")
      })
    })
  });

  await page.goto(`file:${__dirname + '/index.html'}`);

})();

推荐答案

waitForSelector 应该可以工作，例如.当使用易于渲染的地图中的选择器时...或侦听 map.bounds_changed 或 map.idle 事件，一旦地图完全加载就会触发.map.load 事件可能发生得太快了.

waitForSelector should work, eg. when using a selector from the readily rendered map... or listen for the map.bounds_changed or the map.idle event, which are triggered once the map is fully loaded. The map.load event might happen too soon.

这是我刚刚整理的一个工作示例:

Here's a working example, which I've just put together:

const puppeteer = require('puppeteer');
const url = 'https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/full/map-simple';

run().then(() => {
    console.log('entering asynchronous execution.')
}).catch(error => {
    console.log(error)
});

async function run() {
  puppeteer
    .launch({devtools: true, headless: false})
    .then(async browser => {

      const page = await browser.newPage();
      await page.goto(url);

      await page.evaluate(() => {
        window.map.addListener('idle', function(){
          console.log('the map is idle now');
          var div = document.createElement('div');
          div.setAttribute('id', 'puppeteer-map-idle');
          window.document.body.append(div);
        });
      });

      await page.waitForSelector('#puppeteer-map-idle' , {
        timeout: 5000
      }).then((res) => {
        console.log('selector #puppeteer-map-idle has been found.');

        /* in here the map should be fully loaded. */

      });

      // await browser.close();
    });
}

诚然，这是一种解决方法，但可以观察到 DOM 操作.

Admittedly that's kind of workaround, but the DOM manipulation can be observed.

这篇关于Puppeteer 从 Node 中监听 map.on('load')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！