Warum wird meine Seite durch google.load leer?

103

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

Warum in aller Welt zeigt diese Geige http://jsfiddle.net/carlesso/PKkFf/ den Seiteninhalt an, und wenn google.load auftritt, wird die Seite leer?

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

Hier die Seitenquelle für den Faulen (oder Klügeren) von Ihnen:

<!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
quelle
1
schöne Frage, hier ist ein Link: friendlybit.com/js/lazy-loading-asyncronous-javascript (mit anderen Worten: keine Ahnung noch)
mindandmedia
Mir ist aufgefallen, dass document.write ('irgendetwas') auch das vorherige HTML löscht. Vielleicht ist das Dokument im Zusammenhang mit Settimeout aus dem Ruder gelaufen?
mindandmedia

Antworten:

109

Es sieht so aus, als würde google.load das Skript mithilfe von document.write () zur Seite hinzufügen. Wenn es nach dem Laden der Seite verwendet wird, wird das HTML gelöscht.

Dies wird ausführlicher erläutert: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

Mit einer der Ideen können 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 zeigt das Warten von 2 Sekunden mit dem verzögerten Alarmfenster

Welle
quelle
Ich möchte nicht, dass das Warnfenster angezeigt wird. Gibt es dafür eine Arbeit?
Shoib Mohammed A
4
Die Warnung war nur ein Beispiel für einen Codeausschnitt. Es kann alles sein.
Welle
Das ist toll. Das einzige, was ich so geändert habe, wie ich es erwartet hatte, war, die drawChart-Funktion anstelle der Alarmfunktion aufzurufen.
Chiurox
Das Hinzufügen eines leeren Rückrufparameters hat das Problem für mich behoben.
Adam B
32

Sie müssen nur einen Rückruf definieren, und die Seite wird nicht gelöscht (möglicherweise haben es die älteren Versionen von google.load () getan, aber anscheinend nicht die neuen, wenn sie mit Rückruf verwendet werden). Hier ein vereinfachtes Beispiel beim Laden der lib "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!
        }
    } )
}

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

Katai
quelle
5

Hinweis: Das Folgende ist gut, um eine Zeitverzögerung zu vermeiden - es ist gerade noch rechtzeitig. Das Beispiel kann allgemein von allen Skripten verwendet werden (die es benötigen), wurde jedoch insbesondere bei Greasemonkey verwendet. Es wird auch die Google-Diagramm-API als Beispiel verwendet. Diese Lösung geht jedoch ü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 hat das Problem bei der Verwendung von Greasemonkey zum Hinzufügen eines Google-Diagramms nicht gelöst. Dabei wird der Skriptknoten www.google.com/jsapi hinzugefügt (Greasemonkey in Seite eingefügt). Nach dem Hinzufügen dieses Elements für das jsapi-Javascript von Google kann das injizierte (oder Seiten-) Skript den Befehl google.load verwenden (der in den hinzugefügten Knoten geladen werden muss), dieses jsapi-Skript wurde jedoch noch nicht geladen. Das Festlegen eines Timeouts funktionierte, aber das Timeout war nur eine Problemumgehung für das Timing-Rennen des Google jsapi-Skriptladens mit dem injizierten / page-Skript. Wenn Sie sich dort bewegen, wo ein Skript google.load (und möglicherweise google.setOnLoadCallback) ausführt, kann dies die Situation des Timing-Rennens beeinflussen. Im Folgenden wird eine Lösung angeboten, die darauf wartet, dass das Google Script-Element 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";
Codeaperatur
quelle
2

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, und alert () wird nach erfolgreichem google.load () ausgeführt.

Kamil Mierzyński
quelle
2

Dieses Problem trat auf, als ich versuchte, einen google.load(…)in einen jQuery- $(document).ready(…)Wrapper zu verschieben. Wenn Sie die google.load(…) Rückseite außerhalb der Bereitschaftsfunktion verschieben, damit sie sofort ausgeführt wird, wurde das Problem behoben.

Dies funktioniert beispielsweise nicht:

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

Aber das tut:

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