JavaFX : Embedding a browser other than available webview with JavaFX

问题

I am working on a JavaFX application which contains few html,css,JS files which are rendered by the internal webkit browser. Now, the problem is the CSS animations which we have are not getting rendered smoothly in the webkit browser provided by JavaFX, but same code in Firefox or chrome is quite smoother.

Also, no persistence is available(currently using variables in Java, and communication via JS for persistence).

What I am looking for is there any way to integrate some headless browser, or some settings to make CSS animations smoother. Only thing I came across was JxBrowser, but it's toooooo costly for personal usage.

Code :

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;
                }
            }
        });
    }
}

MyBrowser :

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 code which contains animation :

#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;
}

Thank you.

回答1:

Try using Java 8u112, based in your code I created a working sample (Tested using Java JDK 8u112 64bit):

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();
    }
}

I suspect this is because they are now using a newer webkit JDK-8156698 but it might have been a bug before (you can take a look at the 8u112 bug fixes list.

回答2:

I had same issue rendering the angular based web application using webview.and fixed it by upgrading the Java version to 1.8.0_121.

来源：https://stackoverflow.com/questions/37340274/javafx-embedding-a-browser-other-than-available-webview-with-javafx

标签

java

css

javafx

webkit

javafx-webengine