将值赋给Javascript时未转义的XML字符

时间:2018-11-16 00:27:44

标签: javascript html xml xslt

所以我无法解决这个问题。我试图将XML值分配给javascript,以便请求Google地图。这是每个位置的内部,因此我可以为每个位置显示一张小地图。请帮忙。   编辑:我上传了整个XSL文件,其中包含其他一些问题,例如CSS混乱以及手风琴问题。但我的主要重点是底部的javascript问题。使用的XML数据是事件的字典,我正尝试调用存储的LAT和LNG,以便我可以针对每个事件位置生成一个Google地图。谢谢。

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<head>
    <title>XSL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body style="font-family: 'Poiret One', cursive; font-weight: bold; background-image: url(png/BG01dark.jpg);
    background-size: cover; background-position: center; background-repeat: none; background-attachment: fixed;">
    <div class="container">
        <center><font style="color: white; font-size: 50px; text-shadow: 2px 2px 3px #000000;">
            Impulse</font></center>
        <center><p><font style="color: white; font-size: 20px; text-shadow: 1px 1px 1px #000000;">
            Your friendly computer science event organizer</font></p></center>

        <div class="panel-group" id="accordion">
        <xsl:for-each select="all/*">
        <div class="panel panel-default" style="background: rgba(255,255,255.75);" >
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" href="#collapse2">
                  <xsl:if test="Type = 'Careers'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid green; border-radius: 10px; padding: 7px;"
                              src="png/career.png" alt="Careers">Careers</img>
                  </xsl:if>
                  <xsl:if test="Type = 'Database'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid blue; border-radius: 10px; padding: 7px;"
                           src="png/database.png" alt="Database">Database</img>
                  </xsl:if>
                  <xsl:if test="Type = 'Game Dev'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid red; border-radius: 10px; padding: 7px;"
                           src="png/gamepad.png" alt="Game Development">Game Dev</img>
                  </xsl:if>
                  <xsl:if test="Type = 'Mobile App'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid purple; border-radius: 10px; padding: 5px;"
                           src="png/mobile.png" alt="Mobile Development">Mobile Dev</img>
                  </xsl:if>
                  <xsl:if test="Type = 'Networking'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid yellow; border-radius: 10px; padding: 7px;"
                           src="png/networking.png" alt="Networking">Networking</img>
                  </xsl:if>
                  <xsl:if test="Type = 'Robotics'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid #FF6D14; border-radius: 10px; padding: 7px;"
                           src="png/robot.png" alt="Robotics">Robotics</img>
                  </xsl:if>
                  <xsl:if test="Type = 'Cyber Security'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid aqua; border-radius: 10px; padding: 7px;"
                           src="png/security.png" alt="Cyber Security">Cyber Security</img>
                  </xsl:if>
                  <xsl:if test="Type = 'Teach Code'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid #FFB34C; border-radius: 10px; padding: 7px;"
                           src="png/teach.png" alt="Teach Code">Teach Code</img>
                  </xsl:if>
                  <xsl:if test="Type = 'Alt Reality'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid #8D301D; border-radius: 10px; padding: 7px;"
                           src="png/vr.png" alt="Alternate Reality">Alt Reality</img>
                  </xsl:if>
                  <xsl:if test="Type = 'Web Dev'">
                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;
                      border: 3px solid #35405A; border-radius: 10px; padding: 7px;"
                              src="png/webdev.png" alt="Website Development">Web Dev</img>
                  </xsl:if >
                  <object hspace="20" style="font-weight: bold;"><xsl:value-of select="name()"/></object>
                  <object align="right" style="font-weight: bold;"><xsl:value-of select="Date"/></object>
              </a>
            </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
                <div>Event details go here</div>
                <br></br>
                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Sponsor: </span><xsl:value-of select="Sponsor"/></div>
                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Image: </span><xsl:value-of select="Image"/></div>
                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Description: </span><xsl:value-of select="Description"/></div>
                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Address: </span><xsl:value-of select="Location/Address"/></div>
                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Room: </span><xsl:value-of select="Location/Room"/></div>
                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Time: </span><xsl:value-of select="Time"/></div>
                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">RSVP: </span><xsl:value-of select="RSVP_Link"/></div>
                <div>

                    <script type="text/javascript">
                        function initMap() {
                            var location = {lat: "&lt;xsl:value-of select="Location/Coordinates/LAT" disable-output-escaping="yes"/>",
                                            lng: "&lt;xsl:value-of select="Location/Coordinates/LON" disable-output-escaping="yes"/>"};
                            var map = new google.maps.Map(document.getElementById('map'), {
                                zoom: 16,
                                center: location
                                });
                            var marker = new google.maps.Marker({
                                position: location,
                                map: map
                            });
                        }
                    </script>
                    <script async="async" defer="defer"
                            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJQ0BsjJqHv3AoJc35A&amp;callback=initMap">
                    </script>
                </div>
            </div>
          </div>
        </div>
        </xsl:for-each>
      </div>

    </div>

</body>
</html>
</xsl:template>
</xsl:stylesheet>

0 个答案:

没有答案