异步加载Google Maps API

Question

异步加载Google Maps API

3

我想使用jQuery异步加载外部JavaScript文件，并能够调用从外部JavaScript文件中加载的函数。我将我的JS文件包含在html底部，就在</html>之前。jQuery代码就在我的代码之前。

我尝试了以下代码：

(function(){

    $(document).ready(function() {
        obj.init();
    });

    var obj = {

        init:function(){

            $.ajax({
                url: 'http://domain.com/script.js',
                dataType: 'script',
                success: function() {
                    obj.dostuff();
                }
            });

        },
        dostuff:function() {
            // ...do stuff
        }

    }
    window.obj = obj;

})();

Chrome JavaScript控制台报告如下信息： 'write' on 'Document'执行失败: 除非明确打开，否则无法从异步加载的外部脚本向文档中写入。 我试图将所有JS代码放在一个文件中，并使用对象（类和函数）的方式编写，然后从$(document).ready();中调用每个类的init()函数。

请问我做错了什么？

- Stephen Last

1

你可以查看这个链接：http://api.jquery.com/jquery.getscript/ 和这个链接：https://dev59.com/1GAf5IYBdhLWcg3wwk-5 - vaso123

谢谢@lolka_bolka，我当然可以，并且已经做到了... $.getScript()只是我的$.ajax()调用的简写（因此用$.getScript()替换$.ajax()不会使我的代码示例工作），而且那个其他的堆栈问题与jQuery无关。我的问题涉及到异步JavaScript以我代码所示的方式。你知道如何让$.ajax()使用jQuery DOM插入而不是document.write吗？就像我说的，我想使用jQuery来包含外部异步JavaScript，以我代码所示的方式。 - Stephen Last

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matija Grcic · Accepted Answer

您可以使用以下方式加载脚本：

var scriptElement = document.createElement('script');
scriptElement.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(scriptElement);

然后您可以开始使用jQuery或其他已加载的库。

或者类似的东西。

function loadMyScript() {
  var script = document.createElement('script');
  script.type = "text/javascript";
  script.src = "http://code.jquery.com/jquery-latest.min.js";
  document.body.appendChild(script);
}

window.onload = loadMyScript;

更新：

(function(app, $, undefined) {

  //public
  app.init = function() {

    var url = "//code.jquery.com/color/jquery.color.js";
    $.getScript(url, function() {
      doStuff();
    });
  };

  //private
  var doStuff = function() {

    $(".block")
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000)
      .delay(500)
      .animate({
        backgroundColor: "olive"
      }, 1000)
      .delay(500)
      .animate({
        backgroundColor: "#00f"
      }, 1000);
  };

}(window.app = window.app || {}, jQuery));
window.onload = app.init;

这里是 JsBin 地址：http://jsbin.com/lumapubozu/1/edit?html,js,output 谷歌地图更新

在链接中加入'callback=app.loadMap'，即为您的回调函数。

(function(app) {

      app.loadMap = function() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644)
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
      };

      app.loadGoogleMapsScript = function () {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
          'callback=app.loadMap';
        document.body.appendChild(script);
      };

    }(window.app = window.app || {}));

    window.onload = app.loadGoogleMapsScript;

JsBin： http://jsbin.com/wigoxarayu/1/edit?js,output

这是一个JSBin链接，你可以在上面编辑并运行JavaScript代码。