Perché google.load fa diventare vuota la mia pagina?

103

Bene, sembra strano ma non riesco a trovare una soluzione.

Perché nel mondo questo violino http://jsfiddle.net/carlesso/PKkFf/ mostra il contenuto della pagina e, quando si verifica google.load, la pagina diventa vuota?

Funziona bene se il google.load viene eseguito immediatamente, ma averlo ritardato non funziona affatto.

Qui la fonte della pagina per il più pigro (o più intelligente) di voi:

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

1

bella domanda, ecco un link: friendlybit.com/js/lazy-loading-asyncronous-javascript (in altre parole: nessun indizio ancora)

— mindandmedia

ho notato che document.write ('anything') cancellerà anche il precedente html, forse il documento è fuori controllo nel contesto di settimeout?

— mindandmedia

109

Sembra che google.load stia aggiungendo lo script alla pagina utilizzando un document.write (), che se utilizzato dopo il caricamento della pagina, cancella l'html.

Questo spiega in modo più approfondito: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

Usando una delle idee, potresti usare un callback per il caricamento per forzarlo a usare append invece di doc.write:

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

Ciò dimostra l'attesa di 2 secondi con la finestra di avviso ritardata

— onda
fonte

Non voglio che venga visualizzata la finestra di avviso, c'è del lavoro intorno per farlo?

— Shoib Mohammed A

4

L'avviso era solo uno snippet di codice di esempio. Può essere qualsiasi cosa.

— onda

Questo è fantastico. L'unica cosa che ho cambiato per funzionare come mi aspettavo è stata chiamare la funzione drawChart invece della funzione alert.

— chiurox

Solo l'aggiunta di un parametro di richiamata vuoto lo ha risolto per me.

— Adam B

32

Devi solo definire una richiamata e non cancellerà la pagina (forse le versioni precedenti di google.load () lo facevano, ma a quanto pare le nuove non lo fanno se usate con la richiamata). Ecco un esempio semplificato durante il caricamento della libreria "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!
        }
    } )
}

Quando lo faccio senza callback (), ottengo comunque anche la pagina vuota, ma con la richiamata, è corretto per me.

— Katai
fonte

5

Nota: quanto segue è utile per evitare ritardi: è giusto in tempo. L'esempio può essere utilizzato generalmente da tutti gli script (che lo richiedono), ma è stato particolarmente utilizzato con Greasemonkey. Utilizza anche l'API del grafico di Google come esempio, ma questa soluzione va oltre ad altre API di Google e può essere utilizzata ovunque sia necessario attendere il caricamento di uno script.

L'utilizzo di google.load con una richiamata non ha risolto il problema quando si utilizzava Greasemonkey per aggiungere un grafico di Google. Nel processo (Greasemonkey iniettato nella pagina), viene aggiunto il nodo script www.google.com/jsapi. Dopo aver aggiunto questo elemento per jsapi javascript di Google, lo script iniettato (o pagina) è pronto per utilizzare il comando google.load (che deve essere caricato nel nodo aggiunto), ma questo script jsapi non è stato ancora caricato. L'impostazione di un timeout ha funzionato, ma il timeout era solo una soluzione alternativa per la corsa temporale del caricamento dello script jsapi di Google con lo script iniettato / page. Spostarsi nel punto in cui uno script esegue google.load (e possibilmente google.setOnLoadCallback) può influire sulla situazione della corsa ai tempi. Quanto segue offre una soluzione che attende il caricamento dell'elemento script di Google prima di chiamare google.load. Ecco un esempio:

// ********* 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
fonte

2

Non è necessario impostare il timeout. C'è un altro modo:

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

Spiegazione:

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

verrà eseguito dopo il caricamento riuscito dello script JSAPI, quindi alert () verrà eseguito dopo il successo google.load ()

— Kamil Mierzyński
fonte

2

Ho riscontrato questo problema durante il tentativo di spostare un google.load(…)all'interno di un $(document).ready(…)wrapper jQuery . Spostando la parte google.load(…) posteriore all'esterno della funzione ready in modo che venga eseguita immediatamente, il problema è stato risolto.

Ad esempio, questo non funziona:

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

Ma questo fa:

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

— Quinn Comendant
fonte