在javafx中将Css应用于webview中的内容_Java_Html_Css_Javafx

在javafx中将Css应用于webview中的内容

java html css javafx

在javafx中将Css应用于webview中的内容,java,html,css,javafx,Java,Html,Css,Javafx,我正在用JavaFx创建一个示例应用程序。我在应用程序的webview中加载了一个本地html文件。我想将样式应用于从应用程序加载的html页面。当我尝试这样做时，样式将应用于整个webview。我只想在加载的html页面上应用，而不是webview 这是我正在加载的index.html页面 <!DOCTYPE html> <html> <head> <script> function myFunction() { document.g

我正在用JavaFx创建一个示例应用程序。我在应用程序的webview中加载了一个本地html文件。我想将样式应用于从应用程序加载的html页面。当我尝试这样做时，样式将应用于整个webview。我只想在加载的html页面上应用，而不是webview

这是我正在加载的index.html页面

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()" id="btn">Try it</button>

</body>
</html>

这是我的javafx应用程序代码

 Hyperlink hpl3 = new Hyperlink("Load Html File");
    hpl3.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent e) {
        String path = System.getProperty("user.dir");  
        path.replace("\\\\", "/");  
        path +=  "/html/index.html";  
        String path1 = System.getProperty("user.dir");  
        path1.replace("\\\\", "/");  
        path1 +=  "/css/demo.css";  
        webEngine.setUserStyleSheetLocation("file:///" + path1);
        webEngine.load("file:///" + path);   
      }
  });

Hyperlink hpl3=新建超链接（“加载Html文件”）；
setOnAction（新的EventHandler（）{
@重写公共无效句柄（ActionEvent e）{
字符串路径=System.getProperty（“user.dir”）；
替换（“\\\”，“/”）；
路径+=“/html/index.html”；
字符串path1=System.getProperty（“user.dir”）；
路径1.替换（“\\\”，“/”；
path1+=“/css/demo.css”；
setUserStyleSheetLocation（“文件：//“+path1”）；
load（“文件：//“+路径）；
}
});

如前所述：

导入javafx.application.application；
导入javafx.concurrent.Worker.State；
导入javafx.scene.scene；
导入javafx.scene.layout.VBox；
导入javafx.scene.web.WebEngine；
导入javafx.scene.web.WebView；
导入javafx.stage.stage；
导入org.w3c.dom.Document；
导入org.w3c.dom.Element；
导入org.w3c.dom.Text；
公共类WebViewCssPlay扩展了应用程序{
私有静态最终字符串CSS=
“正文{”
+“背景色：#00ff80；”
+字体系列：Arial、Helvetica、san serif
+ "}";
@凌驾
公众假期开始（阶段）{
stage.setTitle（“CSS样式测试”）；
舞台设置宽度（300）；
舞台设置高度（200）；
WebView浏览器=新建WebView（）；
WebEngine WebEngine=browser.getEngine（）；
webEngine.getLoadWorker（）.stateProperty（）.addListener（（obs、oldState、newState）->{
if（newState==State.successed）{
Document doc=webEngine.getDocument（）；
元素样式节点=doc.createElement（“样式”）；
Text styleContent=doc.createTextNode（CSS）；
appendChild（styleContent）；
doc.getDocumentElement（）；
System.out.println（webEngine.executeScript（“document.documentElement.innerHTML”）；
}
});
loadContent（“你好！这是一个测试”）；
VBox root=新的VBox（）；
root.getChildren（）.addAll（浏览器）；
root.getStyleClass（）.add（“浏览器”）；
场景=新场景（根）；
舞台场景；
//scene.getStylesheets（）.add（“/net/snortum/play/web_view.css”）；
stage.show（）；
}
公共静态void main（字符串[]args）{
发射（args）；
}
}

来源：

可能的重复项不要尝试自己创建文件URL。java库中有一些类为您这样做：

Path base=Path.get（System.getProperty（“user.dir”）；String path=base.resolve（path.get（“html”、“index.html”））.toUri（）.toURL（）.toExternalForm（）

在my index.html中，我也放置了图像

，但在应用程序中，它不显示图像。images文件夹位于根目录中，索引位于html文件夹中，html文件夹也位于根目录中。

String path=System.getProperty（“user.dir”）；替换（“\\\”，“/”）；路径+=“/html/index.html”是否有其他方法引用这些文件。
 Hyperlink hpl3 = new Hyperlink("Load Html File");
    hpl3.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent e) {
        String path = System.getProperty("user.dir");  
        path.replace("\\\\", "/");  
        path +=  "/html/index.html";  
        String path1 = System.getProperty("user.dir");  
        path1.replace("\\\\", "/");  
        path1 +=  "/css/demo.css";  
        webEngine.setUserStyleSheetLocation("file:///" + path1);
        webEngine.load("file:///" + path);   
      }
  });

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