將CSS文件應用於JavaFX WebView

我正在嘗試將CSS文件應用於JavaFX WebView對象。從我讀過的內容來看，這應該能夠做到這一點，但顯然我錯過了一些東西，因爲WebView在沒有任何樣式的情況下顯示。將CSS文件應用於JavaFX WebView

package net.snortum.play; 
import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.layout.VBox; 
import javafx.scene.web.WebEngine; 
import javafx.scene.web.WebView; 
import javafx.stage.Stage; 

public class WebviewCssPlay extends Application { 

    @Override 
    public void start(Stage stage) { 
     stage.setTitle("CSS Styling Test"); 
     stage.setWidth(300); 
     stage.setHeight(200); 

     WebView browser = new WebView(); 
     WebEngine webEngine = browser.getEngine(); 
     webEngine.loadContent("<html><body><h1>Hello!</h1>This is a <b>test</b></body></html>"); 

     VBox root = new VBox(); 
     root.getChildren().addAll(browser); 
     root.getStyleClass().add("browser"); 
     Scene scene = new Scene(root); 
     stage.setScene(scene); 
     scene.getStylesheets().add("/net/snortum/play/web_view.css"); 
     stage.show(); 
    } 

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

我的CSS文件看起來像這樣：

.browser { 
    -fx-background-color: #00ff80; 
    -fx-font-family: Arial, Helvetica, san-serif; 
}

來源

2015-09-25 ksnortum

您是否試圖改變'WebView'的風格或WebView中顯示的HTML頁面？ –

WebView中的HTML。 – ksnortum

James_D already explained in his answer如何轉換「了JavaFx CSS」爲「HTML CSS」，但它可能是使用WebEngine.setUserStylesheetLocation設置包含CSS樣式表更方便：

webEngine.setUserStyleSheetLocation(getClass().getResource("style.css").toString());

的style.css包含css代碼：

body { 
    background-color: #00ff80; 
    font-family: Arial, Helvetica, sans-serif; 
}

來源

2015-12-17 16:35:16 fabian

這是有用的，工作非常好。謝謝@fabian。 –

你的代碼適用於CSS來了JavaFX WebView節點;您正嘗試將CSS應用於WebView中顯示的HTML文檔。由於Web視圖沒有任何文本的JavaFX節點，因此-fx-font-family不起作用，並且HTML頁面的背景會遮蔽WebView的背景，因此-fx-background-color將不可見。

爲了做到你想做的事，你需要操縱已加載文檔的DOM並將CSS（標準，HTML適用）應用到它。這看起來是這樣的：

import javafx.application.Application; 
import javafx.concurrent.Worker.State; 
import javafx.scene.Scene; 
import javafx.scene.layout.VBox; 
import javafx.scene.web.WebEngine; 
import javafx.scene.web.WebView; 
import javafx.stage.Stage; 

import org.w3c.dom.Document; 
import org.w3c.dom.Element; 
import org.w3c.dom.Text; 


public class WebViewCssPlay extends Application { 

    private static final String CSS = 
       "body {" 
      + " background-color: #00ff80; " 
      + " font-family: Arial, Helvetica, san-serif;" 
      + "}"; 

    @Override 
    public void start(Stage stage) { 
     stage.setTitle("CSS Styling Test"); 
     stage.setWidth(300); 
     stage.setHeight(200); 

     WebView browser = new WebView(); 
     WebEngine webEngine = browser.getEngine(); 

     webEngine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> { 
      if (newState == State.SUCCEEDED) { 
       Document doc = webEngine.getDocument() ; 
       Element styleNode = doc.createElement("style"); 
       Text styleContent = doc.createTextNode(CSS); 
       styleNode.appendChild(styleContent); 
       doc.getDocumentElement().getElementsByTagName("head").item(0).appendChild(styleNode); 

       System.out.println(webEngine.executeScript("document.documentElement.innerHTML")); 
      } 
     }); 
     webEngine.loadContent("<html><body><h1>Hello!</h1>This is a <b>test</b></body></html>"); 

     VBox root = new VBox(); 
     root.getChildren().addAll(browser); 
     root.getStyleClass().add("browser"); 
     Scene scene = new Scene(root); 
     stage.setScene(scene); 
//  scene.getStylesheets().add("/net/snortum/play/web_view.css"); 
     stage.show(); 
    } 

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

編輯：又見@ Fabian的答案，這是在絕大多數的情況下，使用更清潔和優選。

來源

2015-09-25 15:40:03

將CSS文件應用於JavaFX WebView

回答

相關問題