Question

我正在尝试将谷歌地图api javascript异步。

因此，正常的脚本标记有效<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

但是，以下异步版本没有。

(function () {
    var gmap = document.createElement('script'); gmap.type = 'text/javascript'; gmap.async = true;
    gmap.src = 'https://maps.googleapis.com/maps/api/js?sensor=false';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gmap, s);
})();

经过一些断点+检查操作后，我发现这条线在异步模式下无法正常运行。

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

同步模式下的文档对象是“HTMLDocument”，但在异步模式下则是“#document”。加载页面后，文档对象发生了某些变化。想法？

干杯。

更新：这个问题更多的是为什么不会触发document.write而不是异步加载google map api。如果在此行上设置断点，则可以看到document.write函数存在。这与document.write是本机的事实有什么关系吗？

Answer 1

document.write无法从异步脚本中调用，因为它与文档分离，因此您的JS解析器不知道将它放在何处。充其量，浏览器将忽略它。在最坏的情况下，它可以写在当前文档的顶部（如文档加载完成后调用document.write的情况）。

不幸的是，唯一的答案是重写脚本，在google api的情况下可能不是一个可行的选择。

Answer 2

当异步加载亚马逊广告时，我遇到了一个非常类似的问题。通过更改其行为，我可以在我的应用中获得document.write近似值（$在这种情况下引用jQuery）：

document.write = function(content) {
  if (document.currentScript) {
    var src = document.currentScript.src
        .replace(/\#.*$/, '')
        .replace(/\?.*$/, '')
        .replace(/^.*\/\//, '');
    setTimeout(function() {
      var script = $('script').filter(function() {
        var scriptSrc = $(this).attr('src');
        return scriptSrc && scriptSrc.indexOf(src) !== -1;
      });
      $('<div></div>')
          .addClass('doc-write')
          .html(content)
          .insertAfter(script);
    }, 0);
  } else {
    HTMLDocument.prototype.write.apply(document, arguments);
  }
};

这种方法可以改进，但它足以满足我的需求。希望你会发现它很有用。

Answer 3

在脚本URL中使用参数callback时，脚本不使用write()，您将能够异步加载API。

请参阅：https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch

Answer 4

不要使用document.write()，原因是市场和Molle博士解释的原因。请改用appendChild()，而不是Google's example of async loading。

Answer 5

在这里添加评论，因为我在这个问题上苦苦挣扎。异步加载脚本时（例如通过按钮点击），请确保按照site上的说明完全进行操作。

当我没有给出回调值时，我第一次遇到document.write错误。在给出回调之后，我得到了window.initialize错误，因为......呃...我的代码中没有初始化函数。我将其更改为我的函数名称（类似于loadMap），它开始工作。

说实话，只需从网站上复制代码即可。将window.onload替换为触发所述功能所需的任何内容。

async使用document.write加载javascript

5 个答案: