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进行拓扑图绘制。

相关推荐
时光追逐者5 分钟前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
无奈何杨7 分钟前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器17 分钟前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
hz.ts20 分钟前
Angular 国际化
javascript·ecmascript·angular.js
6武721 分钟前
Vue 数据传递流程图指南
前端·javascript·vue.js
goto_w25 分钟前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
夏天想31 分钟前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant
....49236 分钟前
antvX6节点全选后鼠标通过拖拉调整视图的展示位置
javascript·计算机外设·数据中台·antvx6
jakeswang1 小时前
查询条件与查询数据的ajax拼装
前端·ajax