JavaFX : 使用 JavaFX 嵌入浏览器而不是可用的 webview
Posted
技术标签:
【中文标题】JavaFX : 使用 JavaFX 嵌入浏览器而不是可用的 webview【英文标题】：JavaFX : Embedding a browser other than available webview with JavaFX 【发布时间】：2016-09-17 08:10:05 【问题描述】：我正在开发一个 JavaFX 应用程序，其中包含一些由内部 webkit 浏览器呈现的 html、css、JS 文件。现在，问题是我们拥有的 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;
谢谢。
【问题讨论】：
您提供的代码无法编译。也缺少 HTML。 @OJKrylow ：此代码仅供参考，我们拥有的动画之一。您可以尝试任何来自网络的 CSS 动画（我们已经这样做了），但性能很差。 我在 64 位和 32 位模式下使用 daneden.github.io/animate.css 测试了 WebView。动画没有明显的卡顿。除了一些元素没有正确渲染之外，动画看起来还不错。 @OJKrylow ：不幸的是，我们没有和你一样的经历。由于我们有一个移动的足球，未正确渲染的元素可能会导致问题。无论如何，我们正在寻找更好的解决方案。谢谢。 我看到你提到了 jxbrowser，它是 chromium 框架的一个包装器 - 这里有一个简单的框架 bitbucket.org/chromiumembedded/java-cef - 没有大量的文档/示例代码，所以它不会'不是一个替换工作，但它“应该”具有与 webview 相同的功能。 【参考方案1】：尝试使用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 列表。
【讨论】：
会试试这个，让你知道。谢谢你。 :-)【参考方案2】：我在使用 webview 渲染基于 Angular 的 Web 应用程序时遇到了同样的问题。我通过将 Java 版本升级到 1.8.0_121 来修复它。
【讨论】：
以上是关于JavaFX : 使用 JavaFX 嵌入浏览器而不是可用的 webview的主要内容，如果未能解决你的问题，请参考以下文章
在 JFXPanel 中嵌入 JavaFX 阶段（Swing 嵌入）