javascript - ajax动态加载js文件

Question

我想在单击按钮时在ajax中动态包含一个js文件。我基本上想做的是，我想在单击按钮时加载 map 。为此，我使用了两个文件:

<script type="text/javascript" src="http://maps.google.com/maps?..."></script>
<script type="text/javascript" src="jquery.gmap-1.1.0-min.js"></script>

现在我想要的是，当用户单击按钮时，将加载这两个文件并显示 map ，而无需刷新页面。

此外，当用户单击按钮并且这两个脚本已加载时，第二次单击它不会使脚本再次加载。

对于此事的任何帮助将不胜感激。

<小时/>

感谢您的回复。无论如何，我尝试使用 $script 来做到这一点并且RequireJs 但 map 无法加载。

这是我编写的代码:

<script type="text/javascript" src="../js/jquery-1.7.js"></script>
<script src="../js/script.js"></script>
<script>
function googlemaps()
{
  $script('"http://maps.google.com/maps?file=api&..', 'maps', function() 
  {
      $script('../js/jquery.gmap-1.1.0-min.js', 'jquery', function() {
      $("#map").gMap({address: "USA", markers: [{address: "USA"}]});
      });
  });
}
</script>

<input name="Butoon" type="button" value="Button" onclick="javascript: googlemaps();" />

<div id="map"></div>

我收到的错误是:“G_NORMAL_MAP 未定义”并且“GMap2 未定义”(错误的出现是因为jquery.gmap-1.1.0-min.js 之前加载 http://maps.google.com/maps?file=api& ..负载)。同样的错误是使用 RequireJs 时会重复。你能告诉我我在哪里吗犯了错误。

提前致谢。

Answer 1

你应该看看一些脚本/模块加载器，比如 $cript和 RequireJS 。基本上，他们做同样的事情，甚至更多。