Partially replace WebView content while it is loading


The thing i want to do is to replace some part(s) of the web page HTML content (that is currently getting loaded inside WebView engine) with my own HTML content.

As a simple example - i want to replace every loaded page body's background color to RED. Meaning i will need to add or replace existing body bgcolor attribute with my own value. What should i do to achieve that?

Here is the basic browser code based on JavaFX WebView component:

public class BrowserTest extends Application
    public static void main ( String[] args )
        launch ( args );

    public void start ( Stage stage )
        stage.setTitle ( "WebView" );

        Browser browser = new Browser ();
        browser.load ( "" );

        Scene scene = new Scene ( browser );
        stage.setScene ( scene ); ();

    public class Browser extends Region
        final WebView browser;
        final WebEngine webEngine;

        public Browser ()
            super ();
            browser = new WebView ();
            webEngine = browser.getEngine ();
            getChildren ().add ( browser );

        public void load ( String url )
            webEngine.load ( url );

        private Node createSpacer ()
            Region spacer = new Region ();
            HBox.setHgrow ( spacer, Priority.ALWAYS );
            return spacer;

        protected void layoutChildren ()
            double w = getWidth ();
            double h = getHeight ();
            layoutInArea ( browser, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER );

        protected double computePrefWidth ( double height )
            return 750;

        protected double computePrefHeight ( double width )
            return 500;

There was a good example of this technique in some Oracle docs but since last JavaFX and site updates i couldn't find it at all. Maybe anyone has the link to old docs...

Note: Also jewelsea offered a good way to make post-changes (when the page is loaded), but i need exactly "load-while" solution for my case, so that WebView won't do double job rendering page twice (before and after changes).

6/27/2012 3:45:23 PM

Accepted Answer

Add a listener to the WebEngine document property and when it changes:


To intercept the html source in flight and potentially modify it before it reaches WebView, you can implement your own UrlConnection handler. This is something I have been able to successfully achieve in the past. See option 3 of my longish forum post under the id jsmith for some background info and pointers on how to do this. The key to doing this is setting URL.setURLStreamHandlerFactory(myHandlerFactory).

7/3/2012 9:54:54 PM

It is a little bit late but you may:

  1. Load the page (without showing the component on the screen).
  2. Change what you want in Document structure.
  3. Show stage.

Than changed the content will appear and will start to be visible for user.

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow