google.setOnLoadCallback z jQuery $(document).gotowe (), czy można miksować?

Używam Google Ajax API i sugerują, że używam google.setOnLoadCallback() do robienia różnych rzeczy związanych z ich API, ale używam również jQuery $(document).ready() do robienia innych rzeczy JS, nie związanych z Google API.

Czy można bezpiecznie mieszać te dwa podejścia w jednym dokumencie? Nie zauważyłem jeszcze żadnych problemów, ale przypuszczam, że to kwestia skali.

Author: zgoda, 2009-02-17
Source

4 answers

Musisz to zrobić: 

google.setOnLoadCallback(function() {
  $(function() {
    // init my stuff
  });
});

Nie można zrobić $(document).ready() Bez $ (obiekt jQuery) jest dostępny, więc to musi wejść wewnątrz wywołania zwrotnego. I nie możesz być pewien, że dokument jest gotowy wewnątrz wywołania zwrotnego, więc musisz zrobić ready() zbyt.

 68
Author: cletus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-04 16:49:05

Przepraszam, że wskrzeszam to z martwych, ale 1) wciąż pojawia się jako "odpowiedź" na ten problem i 2) znalazłem lepsze rozwiązanie.

Istnieje opcjonalny trzeci argument funkcji google.load, który pobiera obiekt opcji konfiguracyjnych. Jedną z opcji jest callback. Pozbywa się również potrzeby osobnego wywołania setOnLoadCallback.

Np. 

google.load('visualization', '1.0', {
    'packages': "charttype", 
    'callback': $jQ.proxy(me.setupChart, me)
});

Więc: 

<script src="https://www.google.com/jsapi"></script>
<script>
$(document).ready(function () {
    function mapsLoaded() {
        etc etc etc
    }

    google.load("maps", "2", {"callback" : mapsLoaded});
});
</script>

Zobacz: https://developers.google.com/loader/#Dynamic

 49
Author: Dawn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-19 00:24:07

Jeśli Twój kod JavaScript znajduje się we własnym pliku js, a nie w dokumencie HTML, możesz to zrobić również w dokumencie: 

<script>
        google.load("jquery", "1.7.0");
        google.load("jqueryui", "1.8.16");
        google.setOnLoadCallback(function() {
             var script = document.createElement("script");
             script.setAttribute("type", "text/javascript");
             script.setAttribute("src", "my.js");
             document.getElementsByTagName("html")[0].appendChild(script);
        });
</script>

To ładuje my.js po tym, jak wszystkie inne rzeczy są ładowane z google. W pliku my.js możesz wykonać $(document).ready(...). Tak więc kod aplikacji jest niezależny od "załadowany przez google" lub "załadowany bezpośrednio z serwera".

 6
Author: andy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-12 15:27:03

Po co mieszać, skoro można to wszystko zrobić z $(document).ready()? Po prostu pozbądź się funkcji google.setOnLoadCallback i użyj $(document).ready() jQuery.

To: 

google.setOnLoadCallback(chartEnrollment);

Staje się 

$(document).ready(chartEnrollment);
 4
Author: Vincent,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-04 17:19:24