6

当我在 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);

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

有人有想法吗？

4

1 回答 1

6

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

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

如果按照我的预期将地图 html 打包在您的 jar 中，请使用以下/mapview/mapview.html命令将其从 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();
  }
}

示例程序输出

于 2012-09-24T23:15:43.990 回答