網頁檢查器模式下的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檢查器功能的返回值（我想是一個字符串）？

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(...);

該文檔明確列出了如何將不同的Javascript類型映射到返回的Java類型。

Answer 2

我沒有JavaFX的經驗，盡管我知道Firebug Lite不會公開您使用它檢查過的元素，也不會觸發與之相關的任何事件。 因此，您不能直接訪問該信息。 請參閱相關的源代碼 。

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'的疊加層<div> Firebug Lite注入時，則為true。

為了獲取實際檢查的元素（請注意，它是一個對象，而不是字符串），Firebug Lite提供了一個名為Firebug.browser.getElementFromPoint()的函數，該函數使用事件中的鼠標坐標進行調用。

然后，您的JavaFX代碼需要訪問此JavaScript元素。