Nota: O que segue é bom para evitar atrasos - é bem na hora. O exemplo pode ser usado geralmente por todos os scripts (precisando dele), mas foi particularmente usado com Greasemonkey. Ele também usa a API de gráficos do Google como exemplo, mas esta solução vai além de outras APIs do Google e pode ser usada em qualquer lugar que você precise esperar o carregamento de um script.
Usar google.load com retorno de chamada não resolveu o problema ao usar Greasemonkey para adicionar um gráfico do Google. No processo (Greasemonkey injetado na página), o nó de script www.google.com/jsapi é adicionado. Depois de adicionar esse elemento para jsapi javascript do Google, o script injetado (ou página) está pronto para usar o comando google.load (que precisa ser carregado no nó adicionado), mas esse script jsapi ainda não foi carregado. Definir um tempo limite funcionou, mas o tempo limite foi apenas uma solução alternativa para a corrida de tempo de carregamento do script jsapi do Google com o script injetado / página. Mover-se onde um script executa o google.load (e possivelmente google.setOnLoadCallback) pode afetar a situação de corrida de tempo. O seguinte oferece uma solução que aguarda o carregamento do elemento google script antes de chamar google.load. Aqui está um exemplo:
// ********* 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";