JavaFX 嵌套 WebView 加载本地 Html 与 JS 互相调用传参

home 编辑时间 2023/08/30

![Banner](https://leanote.zzzmh.cn/api/file/getImage?fileId=64eebc79da74050014007df9)

## 前言
很久以前听说过一种写法
比如写个安卓程序，刚学几天还不太会写安卓，就把每个页面都写成本地的html，再用WebView嵌套。
图方便，运行效率低，用户体验差，曾几何时，这是一种很糟嫌弃的写法

没想到，等我学JavaFX，学到吐血的时候，发现JavaFX也可以WebView嵌套Html
比起百度半天答非所问 全英文文档啃到吐血 html我不到5分钟就能写一个页面 一不小心真香了属于是
`嘲笑WebView` => `质疑WebView` => `理解WebView` => `成为WebView`

![滑稽](https://leanote.zzzmh.cn/api/file/getImage?fileId=64eebb72da74050014007df8)

<br><br>
## 折腾

最终目的是希望写个Demo
前端展示全部用本地的Html文件
后端逻辑控制全部用Java和JS交互实现
以达到一个节省学习JavaFX前端组件的目的

<br>
环境大致是这样
系统   `LinuxDeepin 20.9`
IDE    `IntelliJ IDEA 2023.1.2 (Ultimate Edition)`
环境   `OpenJDK 11.0.9`

<br>
**新建JavaFX项目**
上一篇文章详细讲过了，这里略过
地址: [https://zzzmh.cn/post/eee76yv5u9e48dkarmzymnfryohapwm0](https://zzzmh.cn/post/eee76yv5u9e48dkarmzymnfryohapwm0)

<br>
**稍作修改**

由于不用写JavaFX的组件模块，直接简化开发，删除了fxml和相关依赖代码，全部用Java代码即可搞定

maven核心依赖是这三个
`pom.xml`
```xml
<dependencies>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-controls</artifactId>
        <version>17.0.6</version>
    </dependency>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-fxml</artifactId>
        <version>17.0.6</version>
    </dependency>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-web</artifactId>
        <version>17.0.6</version>
    </dependency>
</dependencies>
```

手动引入 `javafx.web` 到模块化
`module-info.java`
```java
module com.zzzmh.jfx {
    requires javafx.controls;
    requires javafx.fxml;
    // 手动引入到模块化
    requires javafx.web;

exports com.zzzmh.jfx;
}
```

删除了不需要的文件
最终目录如下

`index.html` 先随便写点东西占位
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaFX WebView Demo</title>
</head>
<body>
<h1>测试</h1>
</body>
</html>
```

最后改下启动类
把fxml去掉，改为WebView作为最外层Panel
WebView直接加载本地的index.html显示
```java
package com.zzzmh.jfx;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class App extends Application {
    @Override
    public void start(Stage stage) {
        WebView webView = new WebView();
        webView.getEngine().load(getClass().getResource(
                "/com/zzzmh/jfx/html/index.html").toExternalForm());
        Scene scene = new Scene(webView, 800, 600);
        stage.setTitle("JavaFX WebView Demo");
        stage.setScene(scene);
        stage.show();
    }

public static void main(String[] args) {
        launch();
    }
}
```

执行`App.java` `main`方法
一次跑通！
![](https://leanote.zzzmh.cn//api/file/getImage?fileId=64eedc145ea53a77280001f9)

既然能用html作为前端显示，那写个页面就是分分钟的事情了
目前只剩下最后一个问题
不像node js可以直接调用系统api
这里的js只是webview内部的脚本
连接系统的是靠java代码
传统方法写个接口和js交互用在这里属于机关枪打蚊子
所以下一步的思路就是，打通Java和JS，可以互相调用对方的方法，可以互相传参数，那这个Demo就大功告成了，以后啥都能自己开发了

送人玫瑰,手留余香