JavaFX与Web技术融合：HTML、CSS、JS的实战应用

发表时间: 2024-05-29 12:21

JavaFX应用中使用WebView加载一个包含CSS样式和JavaScript的HTML文件。

准备工作

文件结构：

project/│├── src/│   └── main/│       ├── java/│       │   └── com.example/│       │       └── WebViewWithHTMLCSSJS.java│       └── resources/│           └── web/│               ├── index.html│               ├── styles.css│               └── script.js

其中，index.html引用了styles.css和script.js：

index.html

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>JavaFX WebView with CSS and JS</title>    <link rel="stylesheet" type="text/css" href="styles.css"/></head><body>    <h1>Welcome to JavaFX WebView</h1>    <p id="message">This text will be modified by JavaScript.</p>    <button onclick="changeText()">Click me</button>    <script src="script.js"></script></body></html>

styles.css

body {    font-family: Arial, sans-serif;    background-color: #f0f0f0;}h1 {    color: #333;}button {    background-color: #4CAF50;    color: white;    padding: 15px 32px;    text-align: center;    text-decoration: none;    display: inline-block;    font-size: 16px;    margin: 4px 2px;    cursor: pointer;}

script.js

function changeText() {    document.getElementById("message").innerText = "Text changed by JavaScript!";}

JavaFX 应用示例

接下来，在WebViewWithHTMLCSSJS.java中加载上述HTML文件：

import javafx.application.Application;import javafx.concurrent.WorkerStateEvent;import javafx.event.EventHandler;import javafx.scene.Scene;import javafx.scene.layout.StackPane;import javafx.scene.web.WebEngine;import javafx.scene.web.WebView;import javafx.stage.Stage;public class WebViewWithHTMLCSSJS extends Application {    @Override    public void start(Stage primaryStage) {        WebView webView = new WebView();        WebEngine engine = webView.getEngine();        // 设置加载完成后的回调        engine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {            if (newValue == WorkerStateEvent.SUCCEEDED) {                System.out.println("Page loaded.");            }        });        // 加载本地资源目录下的HTML文件        engine.load(getClass().getResource("/web/index.html").toExternalForm());        StackPane root = new StackPane();        root.getChildren().add(webView);        Scene scene = new Scene(root, 800, 600);        primaryStage.setScene(scene);        primaryStage.setTitle("JavaFX WebView with HTML, CSS, and JS");        primaryStage.show();    }    public static void main(String[] args) {        launch(args);    }}

通过engine.load(...)方法，你直接加载了资源目录下的index.html，其中的CSS和JavaScript引用也会被自动处理和加载，前提是路径正确无误。

注意，确保在打包应用时，所有资源文件（包括HTML、CSS、JS等）都被正确地包含在最终的部署包中。

JavaFX与Web技术融合：HTML、CSS、JS的实战应用

准备工作

JavaFX 应用示例

热门阅读

推荐阅读