JavaFx中WebView插件加载的HTML中JavaScript和Java通信

最新推荐文章于 2022-08-19 11:31:18 发布

十点数据

最新推荐文章于 2022-08-19 11:31:18 发布

阅读量1.5k

点赞数 1

分类专栏：数据采集文章标签： java jquery javascript

本文链接：https://blog.csdn.net/fyli0304/article/details/105689394

版权

数据采集专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在编写JavaFx工作流的过程中，由于工作流用的是jquery实现，其中有一些数据，需要通过JavaScript传递到后台Java对象，并保存。大概原则是：首先在Java中创建一个对象，把该对象设置到网页去。而对于另一个方向，JavaScript创建一个对象并从网页中提取出来。下面用代码演示。首先是Java的代码

package sample;

import javafx.application.Application;
import javafx.concurrent.Worker;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;

import java.io.File;
import java.net.URL;

@SuppressWarnings("restriction")
public class Main extends Application {

    /** 用于与Javascript引擎通信。 */
    private JSObject javascriptConnector;

    /** 用于从Javascript引擎进行通信。 */
    private JavaConnector javaConnector = new JavaConnector();;

    @Override
    public void start(Stage primaryStage) throws Exception {
        URL url = new File("H:\\WorkSpace_Browse\\WorkBrowerV1.2\\src\\main\\java\\sample\\test.html").toURI().toURL();

        WebView webView = new WebView();
        final WebEngine webEngine = webView.getEngine();

        // 设置Java的监听器
        webEngine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {
            if (Worker.State.SUCCEEDED == newValue) {
                // 在web引擎页面中设置一个名为“javaConnector”的接口对象
                JSObject window = (JSObject) webEngine.executeScript("window");
                window.setMember("javaConnector", javaConnector);

                // 获取Javascript连接器对象。
                javascriptConnector = (JSObject) webEngine.executeScript("getJsConnector()");
            }
        });

        Scene scene = new Scene(webView, 300, 150);
        primaryStage.setScene(scene);
        primaryStage.show();

        // 这里加载页面
        webEngine.load(url.toString());
    }

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

    public class JavaConnector {
        /**
         * 让JavaScript调用的方法
         *
         * @param value 网页传过来的值
         */
        public void toLowerCase(String value) {
            System.out.println(value);
            if (null != value) {
                // 这里收到了JavaScript传来的数据，再传送一个值回去给JavaScript
                javascriptConnector.call("showResult", value.toLowerCase());
            }
        }
    }
}

首先，加载网页后，将javaConnector对象设置到HTML页面中，使Javascript能够直接调用；

JSObject window = (JSObject) webEngine.executeScript("window");
window.setMember("javaConnector", javaConnector);

随后，在网页检索javascriptConnector对象，使用回调JavaScript，同时传值到JavaScript；

javascriptConnector = (JSObject) webEngine.executeScript("getJsConnector()");

调用javaConnector的toLowerCase(String value) 方法，将值传入到Java，然后通过javascriptConnector对象发回，其实还有更方便的方法返回给JavaScript，这里就不写了。下面给出网页的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Sample</title>
    </head>
    <body>
        <main>

            <div><input id="input" type="text"></div>
            <button onclick="sendToJava();">to lower case</button>
            <div id="result"></div>

        </main>

        
            function sendToJava () {
                var s = document.getElementById('input').value;
                javaConnector.toLowerCase(s);
            };

            var jsConnector = {
                showResult: function (result) {
                    document.getElementById('result').innerHTML = result;
                }
            };

            function getJsConnector() {
                return jsConnector;
            };
        
    </body>
</html>

sendToJava函数调用，由上述Java设置的javaConnector的方法：

function sendToJava () {
    var s = document.getElementById('input').value;
    javaConnector.toLowerCase(s);
};

然后是Java调用的函数，jsConnector对象里面的showResult函数：

var jsConnector = {
     showResult: function (result) {
             document.getElementById('result').innerHTML = result;
     }
};

function getJsConnector() {
     return jsConnector;
};

JavaScript和后台java之间调用，以及之间的互相传入可以有多种类型，具体可以去官网查找相应的api或者demo。