web-dev-qa-db-fra.com

Pourquoi google.load fait que ma page est vide?

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

Pourquoi dans le monde ce violon http://jsfiddle.net/carlesso/PKkFf/ affiche le contenu de la page et, lorsque google.load se produit, la page devient vierge?

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

Voici la page source pour le plus paresseux (ou le plus intelligent) 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>​
javascriptgoogle-visualizationgoogle-loader
103
Enrico Carlesso

Il semble 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 code html.

Cela explique plus en profondeur: 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 la charge 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

108
wave

Il vous suffit de définir un rappel, et cela n'effacera pas la page (peut-être que les anciennes versions de google.load () le faisaient, mais apparemment les nouvelles ne le font pas si elles sont utilisées avec le rappel). Voici un exemple simplifié lorsque je charge la bibliothèque "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!
        }
    } )
}

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

32
Katai

Remarque: Ce qui suit est bon pour éviter un délai - c'est juste à temps. L'exemple peut être utilisé généralement par tous les scripts (en ayant 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 au 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 d'un délai d'attente a fonctionné, mais le délai d'attente n'était qu'une solution de contournement pour la course de synchronisation du chargement du script Google jsapi avec le script injecté/page. Se déplacer là où un script exécute google.load (et éventuellement google.setOnLoadCallback) peut affecter la situation de la course chronométrée. Ce qui suit propose 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";
5
codeaperature

J'ai rencontré ce problème lors d'une tentative de déplacement d'un google.load(…) à l'intérieur d'un wrapper jQuery $(document).ready(…). Le déplacement de la fonction google.load(…) en dehors de la fonction prête pour qu'elle s'exécute a immédiatement résolu le problème.

Par exemple, cela ne fonctionne pas:

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

Mais cela:

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

Vous n'avez pas besoin de définir de délai d'expiration. Il existe une autre manière:

$.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 ()

2
Kamil Mierzyński