async使用document.write加载javascript

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而不是异步加载谷歌地图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);
  }
};

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