网页检查器模式下的 JavaFX 和 Firebug Lite

Question

我使用WebView 创建了一个带有JavaFX 的简单浏览器。我还添加了 Firebug Lite 来检查网站。为了启用 Firebug Lite，我使用了 WebEngine 和方法 executeScript()：

engine.executeScript("if (!document.getElementById('FirebugLite')){E = document['createElement' + 'NS'] && document.documentElement.namespaceURI;E = E ? document['createElement' + 'NS'](E, 'script') : document['createElement']('script');E['setAttribute']('id', 'FirebugLite');E['setAttribute']('src', 'https://getfirebug.com/' + 'firebug-lite.js' + '#startOpened');E['setAttribute']('FirebugLite', '4');(document['getElementsByTagName']('head')[0] || document['getElementsByTagName']('body')[0]).appendChild(E);E = new Image;E['setAttribute']('src', 'https://getfirebug.com/' + '#startOpened');}");

如何截取JavaFX中Firebug Lite的inspector函数的返回值（我想是一个字符串）？

Answer 1

只要把它放在一个变量中：

Object result = engine.executeScript("if (!document.getElementById('FirebugLite')){"+
    "E = document['createElement' + 'NS'] && document.documentElement.namespaceURI;"+
    "E = E ? document['createElement' + 'NS'](E, 'script') :"+
    "document['createElement']('script');"+
    "E['setAttribute']('id', 'FirebugLite');"+
    "E['setAttribute']('src', 'https://getfirebug.com/' + 'firebug-lite.js' + '#startOpened');"+
    "E['setAttribute']('FirebugLite', '4');"+
    "(document['getElementsByTagName']('head')[0] || document['getElementsByTagName']('body')[0]).appendChild(E);"+
    "E = new Image;E['setAttribute']('src', 'https://getfirebug.com/' + '#startOpened');}"
);

返回值的实际类型取决于Javascript的执行结果，你可以向下转换为合适的类型。例如，如果你知道它是String，你可以这样做

String result = (String) engine.executeScript(...);

documentation 明确列出了不同的 Javascript 类型如何映射到返回的 Java 类型。

Answer 2

我对 JavaFX 没有任何经验，但我知道 Firebug Lite 不会公开您使用它检查的元素，也不会触发任何与此相关的事件。因此，您无法直接访问该信息。请参阅related source code。

Firebug Lite 的基本作用是创建一个<div> 作为荧光笔的覆盖层，并为mousemove 和mousedown 设置两个事件处理程序以处理鼠标点击，您也可以收听您的目的。

要通过 JavaScript 通过 Firebug Lite 检查元素，您可以使用以下代码：

document.addEventListener("mousedown", function(e) {
  if (e.target.id === "fbInspectFrame") {
    var inspectedElement = Firebug.browser.getElementFromPoint(e.clientX, e.clientY);

    // Here goes the code, which processes the inspected element
  }
});

说明：

要获得被检查的元素，你必须监听mousedown 事件。但该操作应该只在检查器启用时发生，当检查的元素实际上是覆盖 <div> 称为 'fbInspectFrame' Firebug Lite 在检查时注入时才会发生。

为了获取实际检查的元素（注意它是一个对象，而不是一个字符串），Firebug Lite 提供了一个名为 Firebug.browser.getElementFromPoint() 的函数，它使用事件中的鼠标坐标调用。

然后您的 JavaFX 代码需要访问此 JavaScript 元素。