使用 document.write 异步加载 javascript

IT技术 javascript google-maps-api-3 asynchronous
2021-03-07 14:08:31

我正在尝试异步 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 是原生的事实有什么关系吗？

5个回答

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

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

谢谢。我在这一行做了断点并尝试自己写文档。它确实找到了 write() 函数，这就是为什么它很奇怪。如果write函数是分离的，那为什么不是undefined呢？
2021-05-05 14:08:31

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

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

将callback=somefunction参数与初始 api 加载一起使用
2021-04-24 14:08:31
刚刚投了这个，但现在意识到这在 IE 11 中不支持。有什么建议吗？
2021-05-10 14:08:31

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

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

如果您不喜欢警告，请不要多次加载 API。
2021-05-02 14:08:31
是的，我有回调，但我在 jquery mobile 中遇到了另一个问题，它多次加载 google map api。我不喜欢警告信息。
2021-05-13 14:08:31
它是使用 jqm ajax 模式在 asp mvc 中的 jquery mobile。因此，加载 API 一次而不是使用 jqm 事件看起来更干净。
2021-05-19 14:08:31

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

没有更多的“地图简单异步”。只有“地图简单”。所以这个答案不再有用:(
2021-05-03 14:08:31

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

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

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

其它你可能感兴趣的问题
上一篇什么奇怪的语法？ 下一篇懒惰的吸气剂在课堂上不起作用