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
– Christian Kuetbach, Commented Dec 22, 2015 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
– Jason S, Commented Dec 22, 2015 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
– Christian Kuetbach, Commented Dec 23, 2015 at 13:00
is there a better way besides stackoverflow.com/questions/13802639/… ? — Jason S
– Jason S, Commented Dec 23, 2015 at 16:36

fabian · Accepted Answer · 2015-12-23 12:21:58Z

1

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>

answered Dec 23, 2015 at 12:21

fabian

82.9k12 gold badges99 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason S Over a year ago

That would work for Javascript, is there a way to use it to dispatch between alternate CSS stylesheets?

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 29, 2015 at 17:57

Jason S

191k176 gold badges637 silver badges1k bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related