Question

我在这里有一个很好的问题。

这是一个很好的简单导航脚本，它使用jQuery .load（）。

问题是其中一个页面使用了Google Maps API ...

我在这个论坛的帖子中发现了一些基本上允许你按需加载地图的代码。

我想如果在单击链接时触发loadmap（）和loadscript（），这将起作用。

问题是我有一段时间没有使用jQuery而完全忘记了如何菊花链函数......

基本上：我希望函数执行.load函数，然后调用LoadMap（）和loadScript（）....

<html>
<head>
    <title>
        Overcomming Crome 
    </title>
    <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.jNav').click(function(){
            $('#sandbox').load($(this).attr('href'));
            return false;
          });
        });

        function loadMap() {
          map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(37.4419, -122.1419), 6);
          map.addOverlay(new GMarker(map.getCenter()));
        }

        function loadScript() {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap";
          document.body.appendChild(script);
        }
    </script>

</head>
<body>
    <h1>
        Overcomming Crome
    </h1>
    <li><a href="page1.html" class="jNav">Load Page 1 to Sandbox</a></li>
    <li><a href="page2.html" class="jNav">Load Page 2 to Sandbox</a></li>
    <li><a href="page3.html" class="jNav">Load Page 3 to Sandbox</a></li>
    <div id="sandbox"></div>
</body>

然后这是我编辑的代码：

<html>
    <head>
        <title>
            Overcomming Crome 
        </title>
        <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
              $('.jNav').click(function(){
                $('#sandbox').load($(this).attr('href'),function() {
                  loadMap();
                  loadScript();
                });
                return false;
              });
            });

            function loadMap() {
                alert("Function 1 loaded");
                map = new GMap2(document.getElementById("map"));
                map.setCenter(new GLatLng(37.4419, -122.1419), 6);
                map.addOverlay(new GMarker(map.getCenter()));
            }

            function loadScript() {
                alert("Function 2 loaded");
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap";
                document.body.appendChild(script);
            }
        </script>

    </head>
    <body>
        <h1>
            Overcomming Crome
        </h1>
        <li><a href="page1.html" class="jNav">Load Page 1 to Sandbox</a></li>
        <li><a href="page2.html" class="jNav">Load Page 2 to Sandbox</a></li>
        <li><a href="page3.html" class="jNav">Load Page 3 to Sandbox</a></li>
        <div id="sandbox"></div>
    </body>
</html>

请注意：“地图”在page1.html上....你能看到我想要做什么吗？

Answer 1

由于您将&async=2和&callback=loadMap传递给Google maps API，因此一旦加载，它就会自动调用回调函数（即loadMap）。

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    // loadMap(); <-- unnecessary; and might throw JavaScript error
});

Answer 2

map = new GMap2(document.getElementById("map"));

id id没有任何元素

此外，load函数还有一个回调函数，您可以这样做：

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});

Answer 3

你的意思是传递一个回调函数，如：

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});

这将在loadMap()完成后致电loadScript()和load()。

Answer 4

解决方案不是“菊花链”函数，因为它仍然会按顺序执行它们。您需要等到外部数据加载后再调用其他方法，方法是将回调函数传递给load：

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    loadMap();
});

Answer 5

您对load功能的调用应如下所示：

$('#sandbox').load($(this).attr('href') function(){
    loadScript();
    loadMap();
});

Nice Easy jQuery

5 个答案: