監聽內容變化-Listening to the Сontent Сhanges · 前端開發手冊

## 難點，參考：http://javascript.ruanyifeng.com/dom/mutationobserver.html 此示例演示如何將JavaScript MutationObserver與JavaScript Java Bridge API結合使用。此示例的目標是將HTML元素的每個更改傳輸到Java端，并在“輸出”窗口中顯示它。我們正在偵聽的HTML頁面有一個更新span元素值的計時器。該頁面的源代碼如下： ``` <!DOCTYPE html> <html> <head> <title>index</title> </head> <body> <div> <span class="counter" id="counter"></span> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function () { var counter = 1; setInterval(function() { $(".counter").text(counter++); }, 1000); }); </script> </body> </html> ``` 顯示網頁，注入MutationObserver并監聽它，Swing應用程序的源代碼如下： ``` import com.teamdev.jxbrowser.chromium.Browser; import com.teamdev.jxbrowser.chromium.JSObject; import com.teamdev.jxbrowser.chromium.events.ConsoleEvent; import com.teamdev.jxbrowser.chromium.events.ConsoleListener; import com.teamdev.jxbrowser.chromium.events.ScriptContextAdapter; import com.teamdev.jxbrowser.chromium.events.ScriptContextEvent; import com.teamdev.jxbrowser.chromium.swing.BrowserView; import java.io.File; import javax.swing.*; import java.awt.*; public class ContentListening { public static void main(String[] args) { Browser browser = new Browser(); BrowserView view = new BrowserView(browser); JFrame frame = new JFrame(); frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); frame.add(view, BorderLayout.CENTER); frame.setSize(700, 500); frame.setLocationRelativeTo(null); frame.setVisible(true); browser.addScriptContextListener(new ScriptContextAdapter() { @Override public void onScriptContextCreated(ScriptContextEvent event) { Browser browser = event.getBrowser(); JSObject window = browser.executeJavaScriptAndReturnValue("window") .asObject(); window.setProperty("java", new JavaObject()); browser.executeJavaScript("window.onload = function() {" + "const element = document.getElementById('counter');\n" + "const observer = new MutationObserver(\n" + " function(mutations) {\n" + " window.java.onDomChanged(element.innerHTML);\n" + " });\n" + "const config = {childList: true};\n" + "observer.observe(element, config); };"); } }); String path = new File(".").getAbsolutePath(); browser.loadURL(path + "/index.html"); } /** * The object observing DOM changes. * <p> * <p>The class and methods that are invoked from JavaScript code must be public. */ public static class JavaObject { @SuppressWarnings("unused") // invoked by callback processing code. public void onDomChanged(String innerHtml) { System.out.println("DOM node changed: " + innerHtml); } } } ```