title: How to use JavaFX WebView in DesktopApp with local files?
body: <p>My webview works like charm when I use it within eclipse but as soon as I pack the application into a jar file it throws the following error: </p>
  
  <pre><code>This page contains the following errors:
  error on line 33 at column 26: StartTag: invalid element name
  Below is a rendering of the page up to the first error.
  </code></pre>
  
  <p>This is the HTML-File</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="EN"&gt;
      &lt;head&gt;
      &lt;style&gt;
          html,body {
              height: 99%;
              width: 99%;
          }
          #map {
              width: 100%;
              height: 100%;
              border: 1px solid black;
          }   
      &lt;/style&gt;
      &lt;script src='http://openlayers.org/api/OpenLayers.js'&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id='map'&gt;&lt;/div&gt;
          &lt;script type="text/javascript"&gt;
              var map = new OpenLayers.Map("map",{projection:"EPSG:3857"});
              var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
              var center = toMercator({x:-0.05,y:51.5});
              var osm = new OpenLayers.Layer.OSM();
              map.addLayer(osm);
  
              map.zoomToMaxExtent();  
  
              function addPoints(lon,lat,merkm){
                  var features = [];
  
                  for(var i = 0; i &lt; lon.length; i++) {
                      var center = toMercator({x:lon[i],y:lat[i]});
                      features[i] = new OpenLayers.Feature.Vector(
                              toMercator(new OpenLayers.Geometry.Point(
                                  lon[i],
                                  lat[i])), 
                              {
                                  infoitems : merkm[i]
                              }, {
                                  fillColor : '#008040',
                                  fillOpacity : 0.8,                    
                                  strokeColor : "#ee9900",
                                  strokeOpacity : 1,
                                  strokeWidth : 1,
                                  pointRadius : 8
                              });
                  }
  
                  // create the layer with listeners to create and destroy popups
                  var vector = new OpenLayers.Layer.Vector("Points",{
                      eventListeners:{
                          'featureselected':function(evt){
                              var feature = evt.feature;
                              var popup = new OpenLayers.Popup.FramedCloud("popup",
                                  OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                                  null,
                                  "&lt;div style='font-size:.8em'&gt;"+feature.attributes.infoitems+"&lt;/div&gt;",
                                  null,
                                  true
                              );
                              feature.popup = popup;
                              map.addPopup(popup);
                          },
                          'featureunselected':function(evt){
                              var feature = evt.feature;
                              map.removePopup(feature.popup);
                              feature.popup.destroy();
                              feature.popup = null;
                          }
                      }
                  });
                  vector.addFeatures(features);
  
                  var line = new OpenLayers.Control.DrawFeature(vector,
                          OpenLayers.Handler.Path);
  
  
                  // create the select feature control
                  var selector = new OpenLayers.Control.SelectFeature(vector,{
                      hover:true,
                      autoActivate:true
                  }); 
                 // map.destroy();
                 // map = new OpenLayers.Map("map",{projection:"EPSG:3857"});
  
                //  var osm = new OpenLayers.Layer.OSM();
                  map.addLayer(vector);
                  map.addControl(selector);
                  map.addControl(line);
                  map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13);
  
  
              }
              function pageOnLoad(){
                  alert();
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is how I load the WebView:</p>
  
  <pre><code>WebView browser = new WebView(); 
          final WebEngine webEngine = browser.getEngine();
  
          String mapfolder = "mapview";
          File map = new File(new File("."), "/mapview/mapview.html");
  
  
          final URL mapUrl = MapTab.class.getResource("mapview.html");
  
          webEngine.getLoadWorker().stateProperty().addListener(
                  new ChangeListener&lt;State&gt;() {
                      public void changed(ObservableValue ov, State oldState, State newState) {
                          if (newState == State.SUCCEEDED) {
                              webEngine.executeScript("addPoints("+arg0+","+arg1+","+arg2+")");
                          }
                      }
                  });
          webEngine.javaScriptEnabledProperty().set(true);
          webEngine.load(mapUrl.toExternalForm());
          this.setContent(browser);
  </code></pre>
  
  <p>I dont now where the problem is, tried many differant things like differant file locations, script locations and so on.</p>
  
  <p>Anybody an idea? </p>