如何安全与未加载/已加载的JavaFX WebView进行交互？

核心问题拆解 #

WebView的所有交互必须在JavaFX应用线程执行，但JS资源会在页面加载后延迟初始化（约500ms），直接查询会抛出DOM不存在的异常；若在FX线程等待JS加载，会阻塞线程导致JS无法完成加载，进而形成死锁。我们需要用异步机制封装JS查询结果，让调用方通过Future安全获取数据。

实现思路 #

1. 用CompletableFuture封装JS查询的异步结果，调用方无需阻塞等待
2. 监听WebEngine的页面加载状态，结合轮询JS对象或JS主动回调Java的方式，判断JS环境是否就绪
3. 严格保证所有WebView/JS交互操作在JavaFX应用线程执行，避免线程安全问题

代码实现示例 #

封装WebView的工具类

import javafx.application.Platform;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.concurrent.Worker;
import java.util.concurrent.CompletableFuture;
import java.util.concurrent.TimeUnit;

public class WithWebView {
    private final WebView webView;
    private final WebEngine webEngine;
    private boolean jsReady = false;

    public WithWebView() {
        this.webView = new WebView();
        this.webEngine = webView.getEngine();
        
        // 加载CDN托管的JS编辑器
        webEngine.load("https://cdn.example.com/your-js-editor.js");
        
        // 页面加载完成后启动JS就绪检查
        webEngine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
            if (newState == Worker.State.SUCCEEDED) {
                startJsReadyPolling();
            }
        });
    }

    // 轮询检查JS目标对象是否存在
    private void startJsReadyPolling() {
        Platform.runLater(() -> {
            try {
                // 检查目标JS变量是否已定义
                Object result = webEngine.executeScript("typeof editorX !== 'undefined' ? editorX : null");
                if (result != null) {
                    jsReady = true;
                } else {
                    // 未就绪则100ms后重试
                    Platform.runLater(() -> {
                        try {
                            TimeUnit.MILLISECONDS.sleep(100);
                            startJsReadyPolling();
                        } catch (InterruptedException e) {
                            Thread.currentThread().interrupt();
                        }
                    });
                }
            } catch (Exception e) {
                // 执行JS出错，继续轮询
                Platform.runLater(() -> {
                    try {
                        TimeUnit.MILLISECONDS.sleep(100);
                        startJsReadyPolling();
                    } catch (InterruptedException ex) {
                        Thread.currentThread().interrupt();
                    }
                });
            }
        });
    }

    // 对外提供的JS查询方法，返回CompletableFuture
    public CompletableFuture<Object> getX() {
        CompletableFuture<Object> future = new CompletableFuture<>();
        
        // 确保在FX线程执行JS查询
        if (Platform.isFxApplicationThread()) {
            executeJsQuery(future);
        } else {
            Platform.runLater(() -> executeJsQuery(future));
        }
        
        return future;
    }

    // 实际执行JS查询的逻辑
    private void executeJsQuery(CompletableFuture<Object> future) {
        if (jsReady) {
            try {
                // 查询目标JS变量
                Object result = webEngine.executeScript("editorX");
                future.complete(result);
            } catch (Exception e) {
                future.completeExceptionally(e);
            }
        } else {
            // JS未就绪，延迟重试
            Platform.runLater(() -> {
                try {
                    TimeUnit.MILLISECONDS.sleep(100);
                    executeJsQuery(future);
                } catch (InterruptedException e) {
                    future.completeExceptionally(new InterruptedException("JS查询被中断"));
                    Thread.currentThread().interrupt();
                } catch (Exception e) {
                    future.completeExceptionally(e);
                }
            });
        }
    }

    // 对外暴露WebView用于UI展示
    public WebView getWebView() {
        return webView;
    }
}

调用示例

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.util.concurrent.TimeUnit;

public class MainApp extends Application {
    @Override
    public void start(Stage stage) {
        WithWebView webViewWrapper = new WithWebView();
        
        // 在后台线程执行JS查询，避免阻塞FX应用线程
        new Thread(() -> {
            try {
                // 设置5秒超时，防止无限等待
                Object jsValue = webViewWrapper.getX().get(5, TimeUnit.SECONDS);
                System.out.println("获取到JS变量值：" + jsValue);
            } catch (Exception e) {
                System.err.println("查询JS失败：" + e.getMessage());
            }
        }).start();
        
        // 展示WebView
        stage.setScene(new Scene(webViewWrapper.getWebView(), 800, 600));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

优化方案：JS主动回调替代轮询 #

如果JS资源提供加载完成事件（比如编辑器的ready事件），可以用JS回调Java的方式替代轮询，更高效：

// 在WithWebView的构造方法中修改页面加载完成后的逻辑
webEngine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
    if (newState == Worker.State.SUCCEEDED) {
        // 向JS注入Java回调对象
        webEngine.executeScript("window.javaCallback = { onReady: function() { javaObj.markJsReady(); } }");
        // 绑定JS的就绪事件触发回调
        webEngine.executeScript("editor.on('ready', function() { javaCallback.onReady(); })");
        // 将当前Java对象暴露给JS
        webEngine.executeScript("window.javaObj = this;");
    }
});

// 添加标记JS就绪的方法
public void markJsReady() {
    jsReady = true;
}

关键注意事项 #

• 绝对不要在JavaFX应用线程调用CompletableFuture.get()，否则会阻塞FX线程，导致JS无法完成加载，形成死锁
• 调用get()时建议设置超时时间，避免无限等待
• 所有WebEngine的executeScript调用必须在FX线程执行，否则会抛出线程安全异常

内容的提问来源于stack exchange，提问作者alan ocallaghan