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

相关推荐
floret*4 分钟前
在 hiveSQL 中判断一个字段是否包含某个值
前端·javascript·数据库
2301_796982147 分钟前
‌webdriver.Chrome()参数简介
前端·chrome·python
yqcoder42 分钟前
electron 中 ipcRenderer 作用
前端·javascript·electron
zls3653651 小时前
C# WPF 与 JS 交互可以使用的第三方库
开发语言·javascript·c#·wpf·交互
没资格抱怨1 小时前
Javascript属性遮蔽问题
javascript·ecmascript
前端李易安1 小时前
webpack的常见配置
前端·webpack·node.js
Liquor14193 小时前
JavaScript知识点梳理及案例实践
开发语言·前端·javascript·python·css3·html5·js
小满zs5 小时前
React第十四章(useDeferredValue)
前端·react.js
空白诗5 小时前
HTML 基础概念:什么是 HTML ? HTML 的构成 与 HTML 基本文档结构
前端·html
hummhumm6 小时前
Oracle 第22章:数据仓库与OLAP
java·javascript·后端·python·sql·mysql·database