Warum führt google.load dazu, dass meine Seite leer bleibt?

Question 1

Nun, das sieht seltsam aus, aber ich kann keine Lösung finden.

Warum um alles in der Welt macht diese Geige http://jsfiddle.net/carlesso/PKkFf/ den Seiteninhalt anzeigen und dann, wenn google.load auftritt, die Seite leer wird?

Es funktioniert gut, wenn die google.load sofort ausgeführt wird, aber eine Verzögerung funktioniert überhaupt nicht.

Hier die Seitenquelle für die Fauleren (oder Klügeren) unter euch:

<!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>

Question 2

Sieht so aus, als ob google.load das Skript mithilfe von document.write() zur Seite hinzufügt, das, wenn es nach dem Laden der Seite verwendet wird, den HTML-Code löscht.

Das erklärt ausführlicher:
http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

Mit einer der Ideen könnten Sie einen Rückruf für das Laden verwenden, um die Verwendung von append anstelle von doc.write zu erzwingen:

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

Dies demonstriert die Wartezeit von 2 Sekunden mit dem verzögerten Alarmfenster

Question 3

Sie müssen nur einen Rückruf definieren, und die Seite wird nicht gelöscht (vielleicht haben es die älteren Versionen von google.load() getan, aber anscheinend tun dies die neuen nicht, wenn sie mit Rückruf verwendet werden). Hier ein vereinfachtes Beispiel, wenn ich die Bibliothek “google.charts” lade:

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

Wenn ich es ohne Callback() mache, bekomme ich auch immer noch die leere Seite – aber mit Callback ist es für mich behoben.

Question 4

Hinweis: Das Folgende ist gut, um eine Zeitverzögerung zu vermeiden – es ist gerade noch rechtzeitig. Das Beispiel kann generell von allen Skripten verwendet werden (die es brauchen), wurde aber besonders mit Greasemonkey verwendet. Es verwendet auch die Google-Chart-API als Beispiel, aber diese Lösung geht über andere Google-APIs hinaus und kann überall dort verwendet werden, wo Sie auf das Laden eines Skripts warten müssen.

Die Verwendung von google.load mit einem Rückruf löste das Problem nicht, wenn Greasemonkey zum Hinzufügen eines Google-Diagramms verwendet wurde. Dabei wird der Skriptknoten www.google.com/jsapi hinzugefügt (Greasemonkey in die Seite injiziert). Nach dem Hinzufügen dieses Elements für das jsapi-Javascript von Google ist das eingefügte (oder Seiten-)Skript bereit, den Befehl google.load zu verwenden (der in den hinzugefügten Knoten geladen werden muss), aber dieses jsapi-Skript wurde noch nicht geladen. Das Festlegen eines Timeouts funktionierte, aber das Timeout war lediglich eine Problemumgehung für das Timing-Rennen des Google jsapi-Skriptladevorgangs mit dem injizierten/Seitenskript. Wenn Sie sich an der Stelle bewegen, an der ein Skript google.load (und möglicherweise google.setOnLoadCallback) ausführt, kann dies die Timing-Race-Situation beeinflussen. Das Folgende bietet eine Lösung, die darauf wartet, dass das Google-Skriptelement geladen wird, bevor google.load aufgerufen wird. Hier ist ein Beispiel:

// ********* 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";

Question 5

Sie müssen kein Timeout festlegen. Es geht auch anders:

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

Erläuterung:

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

wird nach erfolgreichem Laden des JSAPI-Skripts ausgeführt, dann wird alert() nach erfolgreichem google.load() ausgeführt

Question 6

Ich bin auf dieses Problem gestoßen, als ich versuchte, a zu verschieben google.load(…) innerhalb einer jQuery $(document).ready(…) Verpackung. Verschieben der google.load(…) wieder außerhalb der ready-Funktion, damit sie sofort ausgeführt wird, löste das Problem.

Das funktioniert zum Beispiel nicht:

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

Aber das geht:

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