XSLT、Doctype 和 Google-Map v3 不工作答案

【问题标题】：XSLT, Doctype and Google-Map v3 not workingXSLT、Doctype 和 Google-Map v3 不工作
【发布时间】：2011-04-03 03:34:05
【问题描述】：

我正在尝试在使用 XLS 转换生成的 HTML 页面中包含 GoogleMap v3（v2 一切正常）。我的JS代码来自this page。

基本上，根据示例，当一切都是纯 HTML 时，地图可以正常工作，但是当我尝试将其包含在 XSL 样式表中时，Firefox (v3.6) 会抱怨并且不想加载任何内容：

错误：未捕获的异常：[异常...“不支持操作”代码：“9” nsresult：“0x80530009 (NS_ERROR_DOM_NOT_SUPPORTED_ERR)”位置：“http://maps.google.com/maps/api/js?sensor=false Line: 9”]

错误：google.maps.LatLng 不是构造函数源文件：file:///home/kevin/google/data.xml 行：2

这是我正在使用的 XSL 代码的简化版本：

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE xsl:stylesheet >
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <head>
         <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
         <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
         <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
         </style>
         <title>Google Maps JavaScript API v3 Example: Map Simple</title>
         <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
         <script type="text/javascript">
      function initialize() {
      var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }
         </script>
      </head>
      <body onload="initialize()">
        <div id="map_canvas"></div>
       </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

以及触发转换的简约 XML 文档：

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE xsl:stylesheet>
<?xml-stylesheet type="text/xsl" href="Display.xsl"?>
<root />

根据我的谷歌调查，问题可能来自错误的 Doctype，但我真的不知道如何修复它，功能类似于

<xsl:output method="html"
    indent="yes"
    omit-xml-declaration="yes"
    encoding="utf-8"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />

不要改变任何东西。

编辑：对于 XML，我的实际 DOCTYPE 稍微复杂一些：

<!DOCTYPE xsl:stylesheet  [<!ENTITY auml   "&#228;" ><!ENTITY ouml   "&#246;" ><!ENTITY uuml   "&#252;" ><!ENTITY szlig  "&#223;" ><!ENTITY Auml   "&#196;" ><!ENTITY Ouml   "&#214;" ><!ENTITY Uuml   "&#220;" ><!ENTITY euml   "&#235;" ><!ENTITY ocirc  "&#244;" ><!ENTITY nbsp   "&#160;" ><!ENTITY Agrave "&#192;" ><!ENTITY Egrave "&#200;" ><!ENTITY Eacute "&#201;" ><!ENTITY Ecirc  "&#202;" ><!ENTITY egrave "&#232;" ><!ENTITY eacute "&#233;" ><!ENTITY ecirc  "&#234;" ><!ENTITY agrave "&#224;" ><!ENTITY iuml   "&#239;" ><!ENTITY ugrave "&#249;" ><!ENTITY ucirc  "&#251;" ><!ENTITY uuml   "&#252;" ><!ENTITY ccedil "&#231;" ><!ENTITY AElig  "&#198;" ><!ENTITY aelig  "&#330;" ><!ENTITY OElig  "&#338;" ><!ENTITY oelig  "&#339;" ><!ENTITY euro   "&#8364;"><!ENTITY laquo  "&#171;" ><!ENTITY raquo  "&#187;" >]>

和 XSL：

<!DOCTYPE xsl:stylesheet  [
  <!ENTITY % xhtml-lat1 SYSTEM
     "http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent">
  <!ENTITY % xhtml-special SYSTEM
     "http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent">
  <!ENTITY % xhtml-symbol SYSTEM
     "http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent">
  %xhtml-lat1;
  %xhtml-special;
  %xhtml-symbol;
  ]>

正确处理我所有的口音和特殊字符，所以如果可能的话，我想避免摆脱它

编辑 2：问题实际上与我尝试通过 Mapstraction API 加载 OpenStreetMap 完全相同，document.write 是不允许的。

当我使用回调函数时，Google Map v2 可以正常工作的另一件事：

http://maps.google.com/maps?file=api&v=2.x&key={myKey}&c&async=2&callback={myInitFunct}

有什么线索可以说明问题吗？

【问题讨论】：

（@Dimitre，我的 xslt 标签出了什么问题？）
这不是 XSLT 问题。这个问题提出的问题不是关于“如何使用 XSLT 解决这个特定问题”，而是关于如何使特定环境/xslt 处理器执行的问题。总结一下——这个问题是 FF 特有的，所以它属于 xsltprocessor 标签。

标签： google-maps google-maps-api-3 doctype xslt

【解决方案1】：

这里的问题是 FF 中的 XSLT 输出不像静态 HTML。

在静态 HTML 页面中，GMap 脚本是同步加载的，因此当 body.onload 事件触发时，该脚本已经加载完毕。

在 XSLT 输出中，当 body.onload 触发时，脚本仍在加载。

我以这种方式解决了这个问题（以下是 XSLT 输出）：

<html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;callback=onLoadCode"></script>
    <script type="text/javascript">
        function onLoadMaps()
        {
            /// init the maps here
        }

        var zOnLoadCode = false;
        var zOnLoadBody = false;
        function onLoadCode() { zOnLoadCode = true; }
        function onLoadBody() { zOnLoadBody = true; }
        var onLoadTimer = window.setInterval(function() {
            if(zOnLoadCode && zOnLoadBody) {
                window.clearInterval(onLoadTimer);
                onLoadMaps();
            }
        },100,"javascript");
    </script>
</head>
<body onload="onLoadBody();">
    <!-- put your maps here -->
</body>

也就是说，我使用 GMap 回调 URL 参数在脚本加载时发出信号，并在页面准备就绪时使用 body.onload 事件发出信号，然后我等到两者都被触发。

【讨论】：

感谢您的回答，但在我的情况下，回调足以绕过问题，无需检查其他所有内容是否已加载！

【解决方案2】：

解决方法是使用 GoogleMap API 的callback 参数：

http://maps.google.com/maps/api/js?sensor=false&callback={myInitFunction}

确实，正如我们在生成的 JS 脚本中看到的，它们插入代码的方式不同：

带回调：

function getScript(src) {
    var s = document.createElement('script');

    s.src = src;
    document.body.appendChild(s);
  }

无回调：

function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
               ' type="text/javascript"><' + '/script>');
}

document.write 可能被禁止的地方...

（但是，我真的不明白他们为什么对同一个操作使用两个不同的代码，也许只是为了解决我们的问题:)

感谢 this blog 的教程

【讨论】：

【解决方案3】：

声明样式表DOCTYPE的正确方法：

<!DOCTYPE xsl:stylesheet [ 
  <!ENTITY % HTMLlat1 PUBLIC
       "-//W3C//ENTITIES Latin 1 for XHTML//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent">
  %HTMLlat1;
  <!ENTITY % HTMLspecial PUBLIC
        "-//W3C//ENTITIES Special for XHTML//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent">
  %HTMLspecial;
  <!ENTITY % HTMLsymbol PUBLIC
        "-//W3C//ENTITIES Symbols for XHTML//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent">
  %HTMLsymbol;
]>

【讨论】：

@Alejandro，是 1）我的代码不工作和 2）你的代码为你工作？因为我在尝试您的示例时遇到了同样的错误（对于 XSLT v2，不知道我从哪里得到这个号码，我会将它改回它所属的 v1！）