注意:以下内容有助于避免时间延迟 - 时间刚刚好。该示例通常可用于所有脚本(需要它),但特别适用于 Greasemonkey。它还以 Google 图表 API 为例,但此解决方案超越了其他 Google API,可用于您需要等待脚本加载的任何地方。
在使用 Greasemonkey 添加 Google 图表时,将 google.load 与回调一起使用并没有解决问题。在这个过程中(Greasemonkey 注入页面),添加了 www.google.com/jsapi 脚本节点。为谷歌的jsapi javascript添加这个元素后,注入的(或页面)脚本就可以使用google.load命令(需要在添加的节点中加载),但是这个jsapi脚本还没有加载。设置超时有效,但超时只是 Google jsapi 脚本加载与注入/页面脚本的计时竞争的一种解决方法。移动脚本执行 google.load(可能还有 google.setOnLoadCallback)的位置会影响计时竞争情况。下面提供了一种在调用 google.load 之前等待 google 脚本元素加载的解决方案。下面是一个例子:
// ********* 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";