12

我正在尝试异步 google map 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 没有被触发而不是异步加载谷歌地图 api。如果你在这一行设置断点，你可以看到 document.write 函数存在。这与 document.write 是本机的事实有什么关系吗？

4

5 回答 5

8

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

不幸的是，唯一的答案是重写脚本，对于 google api，这可能不是一个可行的选择。

于 2012-10-22T00:47:57.820 回答
7

我在异步加载亚马逊广告时遇到了一个非常相似的问题。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);
  }
};

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

于 2014-03-24T16:03:59.867 回答
2

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

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

于 2012-10-22T02:16:52.867 回答
0

不要使用document.write()，原因由市场和莫勒博士解释。改为使用appendChild()，如Google 的异步加载示例中所做的那样。

于 2012-10-22T07:16:16.907 回答
0

在这里添加评论，因为我在这个问题上遇到了一些困难。异步加载脚本时（例如通过单击按钮），请确保您完全按照网站上的说明进行操作。

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

老实说，只需从网站复制代码，它应该可以工作。替换window.onload为触发上述功能所需的任何内容。

于 2015-07-14T11:07:24.720 回答