JavaFX WebView + Vue初始化加载数据解决方案

一般WebView加载Vue时,我们需要注入一些数据,而我发现当WebView加载完毕再注入脚本,Vue是无法正确识别注入的脚本函数,也无法正确获取所要注入的数据,因此可以采用以下方法解决Vue无法正确加载数据问题

1、配置WebView注入脚本,注入成功后执行页面startJavaObject函数

java 复制代码
        webView.getEngine().getLoadWorker().stateProperty().addListener((observableValue, state, t1) -> {
            if (t1 == Worker.State.SUCCEEDED) {
                JSObject window = (JSObject) webView.getEngine().executeScript("window");
                window.setMember("javaObject", new JavaObject());
                webView.getEngine().executeScript("startJavaObject()");
            }
        });
java 复制代码
@Slf4j
public class JavaObject {
    public void test(String s) {
        log.info(s);
    }

    public String getTopologyData(){
        return JSONUtil.toJsonStr(Arrays.asList("A","B","C"));
    }
}

2、html页面代码

通过钩子将Vue内部函数暴露,当注入Java脚本后,直接调用startJavaObject进行Vue内部数据初始化

注:本程序采用的是单个html文件进行开发的,功能单一,主要通过JavaFX实现数据采集,利用vis-network.js进行拓扑图绘制。

相关推荐
ze_juejin几秒前
Node.js 全局变量完整总结
前端
ttyyttemo1 分钟前
Learn-Jetpack-Compose-By-Example---TextFieldValue
前端
_AaronWong2 分钟前
多页面应用登录状态共享:基于弹出窗口的通用解决方案
前端·javascript·vue.js
六月的可乐3 分钟前
Vue接入AI聊天助手实战
前端·vue.js·人工智能
degree5205 分钟前
Webpack 与 Vite 构建速度对比:冷启动、HMR、打包性能实测分析
前端
猩猩程序员6 分钟前
下一版本 MCP 协议将于2025年11月25日发布
前端
熊猫_豆豆8 分钟前
用MATLAB画一只可爱的小熊
前端·matlab·画图
凯哥19708 分钟前
Vue 3 + Supabase 认证与授权时序最佳实践指南
前端·后端
陈卿然11 分钟前
一文通关JavaScript:从基本语法到TypeScript
javascript
GHOME13 分钟前
MCP-学习(1)
前端·后端·mcp