如何在 DesktopApp 中将 JavaFX WebView 与本地文件一起使用？答案

【问题标题】：How to use JavaFX WebView in DesktopApp with local files?如何在 DesktopApp 中将 JavaFX WebView 与本地文件一起使用？
【发布时间】：2012-09-16 09:46:18
【问题描述】：

当我在 eclipse 中使用它时，我的 webview 就像魅力一样工作，但是一旦我将应用程序打包到一个 jar 文件中，它就会抛出以下错误：

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.

这是 HTML 文件

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
    <head>
    <style>
        html,body {
            height: 99%;
            width: 99%;
        }
        #map {
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }   
    </style>
    <script src='http://openlayers.org/api/OpenLayers.js'></script>
    </head>
    <body>
        <div id='map'></div>
        <script type="text/javascript">
            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 < 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,
                                "<div style='font-size:.8em'>"+feature.attributes.infoitems+"</div>",
                                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();
            }
        </script>
    </body>
</html>

这是我加载 WebView 的方式：

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<State>() {
                    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);

我现在不知道问题出在哪里，尝试了许多不同的东西，比如不同的文件位置、脚本位置等等。

有人有想法吗？

【问题讨论】：

标签： webview desktop-application executable-jar

【解决方案1】：

当您从 jar 中加载某些内容时，我认为您不能将 File 协议与 getResource 协议结合使用。我也不认为 jar 协议会理解像 . 和 .. 这样的文件类型说明符。

如果地图 html 位于 jar 之外的本地文件系统上，请使用 file:// 协议从文件系统中加载地图 html。

如果地图 html 像我期望的那样打包在 /mapview/mapview.html 下的 jar 中，请使用以下命令将其从 jar 中加载出来：

webEngine.load(MapTab.class.getResource("/mapview/mapview.html").toExternalForm());

我认为您遇到的错误是因为您设置了 xhtml doctype，这意味着与更宽松的直接 html doctype 相比，它通过了非常严格的类型检查。您的示例文档不是兼容的 xhtml 文档。

我放宽了 html 文档的 doctype，对其进行了一点重构，以便我可以理解它创建了一个简单的加载器应用程序并能够加载地图。

/mapview/mapview.html

<!doctype html>  
<html lang="en">  
  <head>
  <style>
    html,body {
      height: 99%;
      width: 99%;
    }
    #map {
      width: 100%;
      height: 100%;
      border: 1px solid black;
    }   
  </style>
  <script language="javascript" src="http://openlayers.org/api/OpenLayers.js"></script>   
  <script language="javascript" type="text/javascript">
    function doload() {
      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 < 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,
                      "<div style='font-size:.8em'>"+feature.attributes.infoitems+"</div>",
                      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();
    }
  </script>    
  </head>
  <body onload="doload()">
    <div id="map"></div>
  </body>
</html>

/javafxsamples/MapViewer.java

package javafxsamples;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class MapViewer extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    WebView webview = new WebView();
    webview.getEngine().load(
      MapViewer.class.getResource("/mapview/mapview.html").toExternalForm()            
    );
    stage.setScene(new Scene(webview));
    stage.show();
  }
}

【讨论】：

谢谢！真的只是 html 部分导致 App 出现故障，想知道它是从哪里来的。该死的复制/过去的错误！