Nota: Lo siguiente es bueno para evitar un retraso de tiempo: es justo a tiempo. El ejemplo puede ser utilizado generalmente por todos los scripts (que lo necesiten), pero se utilizó especialmente con Greasemonkey. También usa la API de gráficos de Google como ejemplo, pero esta solución va más allá de otras API de Google y se puede usar en cualquier lugar donde necesite esperar a que se cargue un script.
Usar google.load con una devolución de llamada no resolvió el problema al usar Greasemonkey para agregar un gráfico de Google. En el proceso (Greasemonkey inyectado en la página), se agrega el nodo de secuencia de comandos www.google.com/jsapi. Después de agregar este elemento para el javascript jsapi de Google, el script inyectado (o página) está listo para usar el comando google.load (que debe cargarse en el nodo agregado), pero este script jsapi aún no se cargó. La configuración del tiempo de espera funcionó, pero el tiempo de espera fue simplemente una solución para la carrera de sincronización de carga del script jsapi de Google con el script inyectado / page. Moverse por donde un script ejecuta google.load (y posiblemente google.setOnLoadCallback) puede afectar la situación de la carrera cronometrada. A continuación, se ofrece una solución que espera a que se cargue el elemento de secuencia de comandos de Google antes de llamar a google.load. Aquí hay un ejemplo:
// ********* 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";