如何在页面加载后加载谷歌地图外部JavaScript？ [英] How do I load google maps external javascript after page loads?

问题描述

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

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

 < script type =text / javascriptsrc =https： //maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&sensor=true\"></script> 
  

加载和停止页面渲染时间过长将近3秒。我想推迟外部脚本的加载，直到页面完全呈现。

我试图使用getScript（），但它不起作用并抛出以下内容调试控制台中的错误：

 在'Document'上执行'write'失败：无法写入文档从异步加载的外部脚本除非明确打开。 
  

我已经在实际的脚本标记中尝试了'defer'和'async'，但是会抛出相同的错误也是如此。其他加载外部JS文件的方法使我得到相同的错误信息。

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

解决方案

我试过这个我的解决方案，它工作。 / p>

使用jquery在dom上运行脚本。

基本上不使用函数初始化像这样：

  function initialize（）{
 / * You code * / 
} 
  

执行此操作：

  $（function（）{
 / *您的代码* / 
}）
  

并且不需要 google.maps.event.addDomListener（window，'load'，initialize）;

不再。

---

编辑＃1：我目前正面临着一些熟悉的问题，现在我认为我有更好的解决方案。

在你的JS文件中，在初始化函数后，把这个函数：

  var ready：//在哪里存储函数
 
 ready = functio n（）{
 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）; 
}; 
  

它的基本功能是首先调用地图加载器，然后调用

然后利用你刚刚用这个写的内容

在你的html页面中：

 < script> 
 $ .getScript（You js file path，function（）{
 $（document）.ready（ready）; 
}）; 
< / script> 
  

然后这个脚本就可以使用它的变量，然后调用变量在DOM准备好并完成加载后，需要准备好。

我建议把它放在底部您的HTML页面，在正文关闭后。

I will provide more information to explain my situation. I am building an application with PhoneGap for deployment on iOS. I have a a view/page that user will navigate to (not using ajax) that will load google maps js scripts that are needed and do a call to the cordova geolocation api.

My issue is that loading the google maps script:

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

Takes too long to load and stops the page from rendering for up to almost 3 seconds. I want to defer the load of the external script until the page has fully rendered. Putting the script down at the bottom of the page just before does not help at all.

I was attempting to use getScript() but it will not work and throws the following error in debug console:

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.

I have tried 'defer' and 'async' in the actual script tag, but that throws the same error as well. Other methods of loading external JS files lands me with the same error message.

Is there any possible workaround to this problem. I don't even know what the error statement means...

解决方案

I tried this solution of mine and it worked.

Run the script on dom ready using jquery.

basically instead of using your function initialize like this :

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

do this:

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

And no need for google.maps.event.addDomListener(window, 'load', initialize);

Anymore.

---

Edit #1 : I am currently facing some familiar problem to yours, and I think I have a better solution to you now.

in your JS file, after your initialize function , put this function:

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);
    };

What it basically does is that it calls for the map loader first, and then calls for the map after the loader is ready.
And afterwards make use of you what just wrote with this

In your html page :

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

And this gets the script so you can use its variables, and then call the variable you need ready after the DOM is ready and finished loading.

I recommend putting this at the bottom of your html page,after the body closes.

这篇关于如何在页面加载后加载谷歌地图外部JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！