网页检查器模式下的 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 的检查器函数的 return 值（我想是一个字符串）？

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');}"
);

返回值的实际类型取决于执行Java脚本的结果，您可以向下转换为适当的类型。例如，如果你知道它是 String，你可以做

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

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

Answer 2

我对 JavaFX 没有任何经验，但我知道 Firebug Lite 不会公开您使用它检查的元素，也不会自行触发任何与之相关的事件。所以您不能直接访问该信息。见 related source code.

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

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

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 injects while inspecting.

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

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

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

JavaFX and Firebug Lite in web page inspector mode

javascript

javafx

firebug-lite