JavaFX WebView无法正确呈现CSS / HTML文本

Question

正如标题所示，我正在尝试编写将在WebView对象中呈现的CSS / HTML，但我正在编写的HTML无法正确呈现。

这是我用于测试的示例文本：

的test.html

<style>
.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
</style>

<table border=1>
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Entry 1-1</td><td>Entry 1-2</td></tr>
<tr><td>Entry 2-1</td><td>Entry 2-2</td></tr>
</table>

<p>This is a personal manifesto that I'm going to write here and hope that noone sees it because I'm really not certain that anyone is going to be happy if they see it. Prepare yourself, because this is going to be super controversial and politicial.</p>

*Deep breath*

<h1><span class="rainbow">Big Bang Theory Sucks!</span></h1>

如果我只是将其加载到一个简单的文本文档.html中并使用我的网络浏览器加载它，它就可以正常工作：

但是，以下简单的JavaFX代码会错误地呈现html：

Main.java

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.scene.web.WebView;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = FXMLLoader.load(getClass().getResource("/application/WebViewAndTextInput.fxml"));
            Scene scene = new Scene(root,400,400);
            primaryStage.setScene(scene);
            primaryStage.show();

            TextArea textArea = (TextArea) root.getLeft();
            WebView webView = (WebView) root.getRight();
            webView.getEngine().loadContent(textArea.getText());
            textArea.textProperty().addListener((e) -> {
                webView.getEngine().loadContent(textArea.getText());
            });

        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

WebViewAndTextInput.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.web.WebView?>


<BorderPane prefHeight="450.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111">
   <right>
      <WebView prefHeight="-1.0" prefWidth="400.0" />
   </right>
   <left>
      <TextArea prefWidth="300.0" text="&lt;span style=&quot;color:#ff0000&quot;&gt;Hello World!&lt;/span&gt;" wrapText="true">
         <font>
            <Font name="Courier New" size="14.0" />
         </font>
      </TextArea>
   </left>
</BorderPane>

结果：

这显然是灾难性的，因为现在，我的超级有争议的意见正在被错误呈现的文本审查！我是否需要对WebView对象进行更改以正确呈现此文本，或者这是WebView渲染引擎中的错误？

Answer 1

这可能是一个错误，但可能在使用过的userAgent中。您可以通过简单地打印其信息来判断您当前的userAgent;

System.out.println(web.getEngine().getUserAgent());

基于userAgent，您可以确定需要做什么才能使事情按照您想要的方式工作，以及当前userAgenr有哪些限制使得（不）以他们的方式工作。

另外，这个SO post解释了一下userAgent检索。并且this blog post可能会在类似的useragent相关问题上提供更多信息和有用的工具。