JavaFX WebView + Vue初始化加载数据解决方案
一般WebView加载Vue时,我们需要注入一些数据,而我发现当WebView加载完毕再注入脚本,Vue是无法正确识别注入的脚本函数,也无法正确获取所要注入的数据,因此可以采用以下方法解决Vue无法正确加载数据问题
1、配置WebView注入脚本,注入成功后执行页面startJavaObject函数
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()");
}
});
@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进行拓扑图绘制。