Question

This gist似乎涵盖了我想做的事情，但这似乎是一种思想实验，而不是有效的代码。无论如何，我很难让它为我工作。

我正在PhantomJs中打开一个页面，该页面加载JavaScript库并开始一个过程。该过程完成后，该库将在实例对象的上下文内触发一个事件。我想

（a）设置PhantomJS来侦听客户端页面中实例对象中的正确事件

OR

（b）向客户端页面添加一些代码，以将事件“冒泡”到window并设置PhantomJS来监听。

这就是我为选项B尝试过的方法。

client.html：

<html>
<body>
  <script src='https://example.com/library.js'></script>
  <script>
    function sendWindowEvent() {
      // I've also tried document, top.parent, etc.
      window.dispatchEvent( new CustomEvent('myEvent', {
        detail: {
          message: "Hello World!",
          time: new Date(),
        },
        bubbles: true,
        cancelable: true
      }));
    }

    var instance = new myLibrary.constructor();
    instance.addEventListener("onInitialized", sendWindowEvent);
    instance.start();
  </script>
</body>
</html>

在node.js应用中：

const headlessBrowser = await phantom.create();
const page = await headlessBrowser.createPage();
await page.on('onResourceRequested', (requestData) => {
  console.info('Requesting', requestData.url);  // displays http://localhost:1337/client.html & https://example.com/library.js
});
await page.on('myEvent', async (evt) => {
  console.log('event detected:', evt);  // never triggered
});
const openStatus = await page.open('http://localhost:1337/client.html');
console.log('phantom status:', openStatus);  // displays true

对我所缺少的东西有什么想法吗？这不是受支持的功能吗？ 提前谢谢。

Answer 1

page.on事件侦听器正在响应PhantomJS而不是其目标页面生成的特定技术事件。要接收本机页面事件，您必须在浏览器上下文中订阅它们：

await page.evaluate(function(){
    window.addEventListener("myEvent", function(e){ console.log(e)})
});

请务必订阅page.onConsoleMessage回调以获取该消息。

Answer 2

window.callPhantom()是我想要的。文档为here。

client.html：

<html>
<body>
  <script src='https://example.com/library.js'></script>
  <script>
    function sendWindowEvent() {
      if (typeof window.callPhantom === 'function') {
        window.callPhantom({hello: 'world'});
      }
    }

    var instance = new myLibrary.constructor();
    instance.addEventListener("onInitialized", sendWindowEvent);
    instance.start();
  </script>
</body>
</html>

在node.js应用中：

const headlessBrowser = await phantom.create();
const page = await headlessBrowser.createPage();
page.on('onCallback', data => {
  console.log('CALLBACK: ' + JSON.stringify(data)); // Prints 'CALLBACK: {"hello":"world"}'
});
page.open('http://localhost:1337/client.html');

使用page.on（'customEvent'，fn）监听自动触发的客户端事件

2 个答案: