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

相关推荐
吃瓜群众i1 小时前
理解Javascript闭包
前端·javascript
安大桃子1 小时前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede1 小时前
多行文本省略号显示,更多按钮展开全部
前端
就是我1 小时前
React 应用性能优化实战
前端·react.js·性能优化
G扇子1 小时前
深入解析XSS攻击:从原理到防御的全方位指南
前端·安全
Blucas1 小时前
《深入 PageSpy》二:入门指南
javascript·前端框架
snakeshe10101 小时前
入解析React性能优化策略:eagerState的工作原理
前端
六边形6661 小时前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
kovli1 小时前
红宝书第十八讲:详解JavaScript的async/await与错误处理
前端·javascript
前端付豪1 小时前
🚀 React 应用国际化实战:深入掌握 react-i18next 的高级用法
前端·react.js·架构