javascript - 如何在页面加载后加载 google maps 外部 javascript？

Question

我会提供更多信息来解释我的情况。我正在使用 PhoneGap 构建一个应用程序以在 iOS 上部署。我有一个用户将导航到的 View /页面(不使用 ajax)，它将加载所需的谷歌地图 js 脚本并调用 cordova geolocation api。

我的问题是加载谷歌地图脚本:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&sensor=true"></script>

加载时间过长，导致页面停止呈现长达近 3 秒。我想推迟外部脚本的加载，直到页面完全呈现。将脚本放在页面底部之前根本没有帮助。

我试图使用 getScript() 但它不起作用并在调试控制台中抛出以下错误:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

我在实际的脚本标签中尝试了“延迟”和“异步”，但也抛出了同样的错误。加载外部 JS 文件的其他方法让我看到相同的错误消息。

是否有任何可能的解决方法来解决此问题。我什至不知道错误声明是什么意思...

Answer 1

我尝试了我的这个解决方案，它奏效了。

使用 jquery 在 dom 上运行脚本。

基本上不是像这样使用您的函数初始化:

function initialize(){
/*You code */
}

这样做:

$(function(){
/*You code */
})

而且不需要 google.maps.event.addDomListener(window, 'load', initialize);

不再。

---

编辑#1:我目前正面临一些您熟悉的问题，我想我现在有更好的解决方案。

在你的 JS 文件中，在你的初始化函数之后，放置这个函数:

var ready: // Where to store the function

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

它基本上做的是首先调用 map 加载器，然后在加载器准备就绪后调用 map 。
然后用你刚刚用这个写的东西

在您的 html 页面中:

<script>
    $.getScript("You js file path",function(){
          $(document).ready(ready);
    });
</script>

这会获取脚本，以便您可以使用它的变量，然后在 DOM 准备就绪并完成加载后调用您需要的变量 ready。

我建议在正文关闭后将它放在 html 页面的底部。