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 ，並通過Web瀏覽器加載它，那么它將正常工作：

但是，以下簡單的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帖子還介紹了有關userAgent檢索的內容。 並且此博客文章可能會提供有關模擬用戶代理相關問題的更多信息和有用的工具。