JavaFX：在JavaFX中嵌入除可用Webview之外的浏览器

Question

JavaFX：在JavaFX中嵌入除可用Webview之外的浏览器

12

我正在开发一个JavaFX应用程序，其中包含几个HTML、CSS和JS文件，这些文件由内部的Webkit浏览器渲染。现在的问题是，我们所使用的CSS动画在JavaFX提供的Webkit浏览器中无法平稳地渲染，但是同样的代码在Firefox或Chrome中却很流畅。

此外，没有可用的持久性（目前使用Java中的变量，并通过JS进行通信以获得持久性）。

我想知道是否有一种集成一些无头浏览器或一些设置以使CSS动画更加平滑的方法。我找到的唯一一件事是JxBrowser，但它对个人使用来说太过昂贵。

代码：

public class Main extends Application {

    private Scene scene;
    MyBrowser myBrowser;

    String completeText = "";

    @Override
    public void start(Stage primaryStage) throws Exception{
        primaryStage.setTitle("Frontend");
        java.net.CookieManager manager = new java.net.CookieManager();
        java.net.CookieHandler.setDefault(manager);

        myBrowser = new MyBrowser();
        scene = new Scene(myBrowser, 1080, 1920);

        primaryStage.setScene(scene);
        primaryStage.setFullScreen(true);
        primaryStage.show();

        // @ being the escape character
        scene.setOnKeyTyped(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {
                String text = event.getCharacter();
                if (text.equals("0")) {
                    String tempText = completeText;
                    completeText = "";
                    processText(tempText);
                }else {
                    completeText = completeText+text;
                }
            }
        });
    }
}

我的浏览器：

public class MyBrowser extends Region {

public MyBrowser() {
        webEngine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {
            if (newValue == Worker.State.SUCCEEDED) {
                JSObject window = (JSObject) webEngine.executeScript("window");
                window.setMember("app", this);
            }
        });




        URL urlHello = getClass().getResource(hellohtml);

        webEngine.load(urlHello.toExternalForm());
        webView.setPrefSize(1080, 1920);
        webView.setContextMenuEnabled(false);
        getChildren().add(webView);
    }

包含动画效果的CSS代码：

#ball-container.go #ball{
-webkit-animation: rotating-inverse 2s ease-out 0s 1 normal;
animation: rotating-inverse 2s ease-out 0s 1 normal;
}


#ball-container {
height: 102px;
width: 102px;
position: absolute;
top: -95px;
left: 480px;
-webkit-transition: all 0.9s ease-in-out 0s;
transition: all 0.9s ease-in-out 0s;
}



#ball-container.shake .ball-wrapper{
-webkit-animation: yAxis 0.9s ease-in-out;
animation: yAxis 0.9s ease-in-out;
}

谢谢。

- We are Borg

您提供的代码无法编译。同时缺少HTML。 - Oliver Jan Krylow

@OJKrylow：这段代码仅供参考，是我们其中一种动画。你可以尝试从网上使用任何CSS动画（我们已经做过了），但性能不佳。 - We are Borg

我在64位和32位模式下使用https://daneden.github.io/animate.css/测试了WebView。动画没有明显的卡顿。除了一些元素渲染不正确外，动画似乎很好。 - Oliver Jan Krylow

@OJKrylow：不幸的是，我们没有和你有相同的经历。由于我们有一个移动的足球，元素没有正确渲染可能会导致问题。无论如何，我们正在寻找更好的解决方案。谢谢。 - We are Borg

我看到你提到了jxbrowser，它是基于chromium框架的封装 - 这里有一个简单的框架https://bitbucket.org/chromiumembedded/java-cef - 没有太多的文档/示例代码，所以这不是一个轻松的替换工作，但是它“应该”具有与webview相同的功能。 - chris.fy

2个回答

0

我曾经遇到过同样的问题，使用webview渲染基于angular的Web应用程序时出现了问题。通过升级Java版本为1.8.0_121，我已将其修复。

- Dila Gurung

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JavierJ · Accepted Answer

尝试使用Java 8u112，根据您的代码，我创建了一个可工作的示例（使用Java JDK 8u112 64位进行测试）：

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

public class Example extends Application
{
    public static void main(String[] args)
    {
        launch(args);
    }

    class MyBrowser extends Parent
    {
        private WebEngine   webEngine;
        private WebView webView;

        public MyBrowser()
        {
            webView = new WebView();
            webEngine = webView.getEngine();

            // Ugly (but easy to share) HTML content 
            String pageContents = 
                    "<html>"
                        + "<head>"
                            + "<style>"
                                + "@-webkit-keyframes mymove {"
                                    + "from {top: 0px;}"
                                    + "to {top: 50px;}"
                                + "}"
                                + ".box { "
                                    + "width: 150px; "
                                    + "position: relative; "
                                    + "height: 150px; "
                                    + "background: red; "
                                    + "margin-top: 35px; "
                                    + "margin-left: auto; "
                                    + "margin-right: auto; "
                                    + "-webkit-transition: background-color 2s ease-out;  "
                                    + "-webkit-transition: all 1s ease-in-out; "
                                + "}"
                                +".box:hover {"
                                    +" background-color: green;"
                                    + "width:350px;"
                                    + "-webkit-animation: mymove 1s infinite;"
                                +"}"        
                            + "</style>"
                        + "</head>"
                        + "<body>"
                            + "<div class='box'></div>"
                        + "</body>"
                    + "</html>";

            webEngine.loadContent(pageContents);
            webView.setContextMenuEnabled(false);
            getChildren().add(webView);
        }
    }

    private Scene   scene;
    MyBrowser       myBrowser;

    @Override
    public void start(Stage primaryStage) throws Exception
    {
        primaryStage.setTitle("Frontend");
        myBrowser = new MyBrowser();
        scene = new Scene(myBrowser);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

我怀疑这是因为他们现在正在使用更新的webkit JDK-8156698，但可能之前是一个错误（你可以查看8u112 bug fixes列表）。