Pourquoi google.load rend ma page vide?

103

Eh bien, cela semble étrange mais je ne suis pas en mesure de trouver une solution.

Pourquoi diable ce violon http://jsfiddle.net/carlesso/PKkFf/ montre-t-il le contenu de la page et, ensuite, lorsque google.load se produit, la page devient vide?

Cela fonctionne bien si le google.load est effectué immédiatement, mais le retarder ne fonctionne pas du tout.

Voici la source de la page pour les plus paresseux (ou les plus intelligents) d'entre vous:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ciao</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>
  <body>
    <h1>Test</h1>
    <div id="quicivanno">
      <p>ciao</p>
    </div>
  </body>
  <script type="text/javascript">
       setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 2000);
  </script>
</html>

javascript google-visualization google-loader

— Enrico Carlesso
source

1

belle question, voici un lien: friendlybit.com/js/lazy-loading-asyncronous-javascript (en d'autres termes: pas encore d'indice)

— mindandmedia

J'ai remarqué que document.write ('n'importe quoi') effacera également le code HTML précédent, peut-être que le document est hors de contrôle dans le contexte du règlement?

— mindandmedia

109

On dirait que google.load ajoute le script à la page à l'aide d'un document.write (), qui, s'il est utilisé après le chargement de la page, efface le html.

Cela explique plus en détail: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

En utilisant l'une des idées, vous pouvez utiliser un rappel pour le chargement pour le forcer à utiliser append plutôt que doc.write:

setTimeout(function(){google.load('visualization', '1', {'callback':'alert("2 sec wait")', 'packages':['corechart']})}, 2000);

Cela montre l'attente de 2 secondes avec la fenêtre d'alerte retardée

— vague
source

Je ne veux pas que la fenêtre d'alerte soit affichée. Y a-t-il du travail pour le faire?

— Shoib Mohammed A

4

L'alerte n'était qu'un exemple d'extrait de code. Cela peut être n'importe quoi.

— vague du

C'est bien. La seule chose que j'ai changé pour fonctionner comme je m'y attendais était d'appeler la fonction drawChart au lieu de la fonction d'alerte.

— chiurox

L'ajout d'un paramètre de rappel vide a résolu le problème pour moi.

— Adam B

32

Il vous suffit de définir un callback, et cela n'effacera pas la page (peut-être que les anciennes versions de google.load () l'ont fait, mais apparemment les nouvelles ne le font pas si elles sont utilisées avec le callback). Voici un exemple simplifié lors du chargement de la librairie "google.charts":

if(google) {
    google.load('visualization', '1.0', {
        packages: ['corechart'],
        callback: function() {
            // do stuff, if you wan't - it doesn't matter, because the page isn't blank!
        }
    } )
}

Quand je le fais sans callback (), j'obtiens toujours la page vierge - mais avec le callback, c'est corrigé pour moi.

— Katai
source

5

Remarque: ce qui suit est bon pour éviter un retard - c'est juste à temps. L'exemple peut être utilisé généralement par tous les scripts (qui en ont besoin), mais a été particulièrement utilisé avec Greasemonkey. Il utilise également l'API Google Chart comme exemple, mais cette solution va au-delà des autres API Google et peut être utilisée partout où vous devez attendre le chargement d'un script.

L'utilisation de google.load avec un rappel n'a pas résolu le problème lors de l'utilisation de Greasemonkey pour ajouter un graphique Google. Dans le processus (Greasemonkey injecté dans la page), le nœud de script www.google.com/jsapi est ajouté. Après avoir ajouté cet élément pour le javascript jsapi de Google, le script injecté (ou page) est prêt à utiliser la commande google.load (qui doit être chargée dans le nœud ajouté), mais ce script jsapi ne s'est pas encore chargé. La définition du délai d'expiration fonctionnait, mais le délai d'expiration était simplement une solution de contournement pour la course de synchronisation du chargement du script jsapi de Google avec le script injecté / page. Se déplacer où un script exécute google.load (et éventuellement google.setOnLoadCallback) peut affecter la situation de course chronométrée. Ce qui suit présente une solution qui attend le chargement de l'élément de script google avant d'appeler google.load. Voici un exemple:

// ********* INJECTED SCRIPT *********//
// add element
var gscript = document.createElement('script');
gscript.setAttribute("type", "application/javascript");
gscript.setAttribute("id", "XX-GMPlusGoogle-XX");
document.body.appendChild(gscript);

// event listener setup     
gscript.addEventListener("load",    
    function changeCB(params) {
        gscript.removeEventListener("load", changeCB);
        google.load("visualization", "1", {packages:["corechart"], "callback": 
            function drawChart() {
                var data;
                // set the durationChart data (not in example)
                data = new google.visualization.arrayToDataTable(durationChart);

                var options = {
                    title:"Chart Title",
                    legend: {position:"none"},
                    backgroundColor:"white",
                    colors:["white","Blue"],
                    width: window.innerWidth || document.body.clientWidth,
                    height: window.innerHeight || document.body.clientHeight,
                    vAxis: {title: "Durations", baselineColor: "black", textStyle:{fontSize:12}},
                    hAxis: {title: "Days Since First Instance"},
                    height: ((cnt > 5)? cnt * 50 : 300),
                    isStacked: true
                }; // options


                // put chart into your div element
                var chart = new google.visualization.BarChart(document.getElementById('XX-ChartDiv-XX'));
                chart.draw(data, options);
            } // drawChart function
        }); //packages within google.load & google load
    } // callback changeCB
);

// can use SSL as "https://www.google.com/jsapi";
gscript.src = "http://www.google.com/jsapi";

— codeaperature
source

2

Vous n'avez pas besoin de définir un délai d'expiration. Il existe un autre moyen:

$.getScript("https://www.google.com/jsapi", function () {
     google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
});

Explication:

 function () {
     google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
 }

sera exécuté après le chargement réussi du script JSAPI, puis alert () sera exécuté après le succès de google.load ()

— Kamil Mierzyński
source

2

J'ai rencontré ce problème en essayant de déplacer un google.load(…)dans un $(document).ready(…)wrapper jQuery . Déplacer le google.load(…) dos en dehors de la fonction prête pour qu'il s'exécute immédiatement a résolu le problème.

Par exemple, cela ne fonctionne pas:

$(document).ready(function() {
    google.load('visualization', '1', {packages: ['corechart']});
});

Mais cela fait:

google.load('visualization', '1', {packages: ['corechart']});
$(document).ready(function() {
    // …
});

— Comendant Quinn
source