making HTML and CSS "aware" of a JavaFX WebView environment

Question

I am working on HTML+CSS+Javascript with a Java team using the JavaFX WebView renderer. I would also like to use the same HTML+CSS+Javascript in normal browsers, but I want a few minor differences in style, to optimize readability.

Is there something I can ask the JavaFX programmers to do, so that my HTML+CSS+Javascript can be "aware" of the difference? For example, a @media query, so that I can use a different CSS in WebView vs. in normal browsers.

They could set another UserAgent, call a javascript method or you could use the -fx prefix for JavaFX only CSS. Can you be a little bit more precize about you goal? Just set another CSS file? — Christian Kuetbach, Dec 22 '15 at 22:45
yeah, pretty much just set another CSS file... although I might want to use Javascript to do something different also. User-Agent is one possibility, I guess; could you elaborate on "call a javascript method" -- how can WebView do this before loading HTML? — Jason S, Dec 22 '15 at 23:34
Not before, but it can call a javascript after loading like "enableJavaFXFeatures()" or you can ask them to provide a javascript method in java FX, which you can call. But in that case, I would simply use the UserAgent. — Christian Kuetbach, Dec 23 '15 at 13:00
is there a better way besides http://stackoverflow.com/questions/13802639/load-a-javascript-file-and-css-file-depending-on-user-agent ? — Jason S, Dec 23 '15 at 16:36

score 1 · Answer 1 · answered Dec 23 '15 at 12:21

You can ask them to include some string in the userAgent property of the WebEngine:

WebEngine engine = ...;
engine.setUserAgent(engine.getUserAgent() + " JavaFX-WebView");

You can check this property from javascript (window.navigator.userAgent), e.g.:

<!DOCTYPE html>

<html>
    <head>
        <title>MyPage</title>
        <style>
            body {
                background-color: red;
            }
            body.javafx {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <script>
            var javaFX = (window.navigator.userAgent.indexOf("JavaFX-WebView") > -1);
            document.body.innerHTML = javaFX ?
                    "Hello from JavaFX" : "Hello from Browser";
            if (javaFX)
                document.body.className = "javafx";
        </script>
    </body>
</html>

That would work for Javascript, is there a way to use it to dispatch between alternate CSS stylesheets? — Jason S, Dec 23 '15 at 16:30

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

just ran across this page Communicating between javascript and javafx which says

The Java application can pass arbitrary scripts to the JavaScript engine of a WebEngine object by calling the WebEngine.executeScript() method:
webEngine.executeScript("history.back()");

So I guess I could have my Java team do something like this on initialization of each page:

 webEngine.executeScript("var javaFXApplicationID = 'ABCDE';");

and check for this in Javascript.

making HTML and CSS "aware" of a JavaFX WebView environment

2 Answers2