Enr*_*sso 103 javascript google-visualization google-loader
嗯,这看起来很奇怪,但我无法找到解决方案.
为什么世界上这个小提琴http://jsfiddle.net/carlesso/PKkFf/显示页面内容,然后当google.load发生时,页面变成空白？
如果google.load立即完成,它可以很好地工作,但延迟使用它根本不起作用.
这里是您的懒惰(或更聪明)的页面源:
<!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>?
wav*_*ave 109
看起来像google.load正在使用document.write()将脚本添加到页面中,如果在页面加载后使用它,则会清除html.
这解释得更加深入:http: //groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6
使用其中一个想法,您可以使用回调来强制它使用append而不是doc.write:
setTimeout(function(){google.load('visualization', '1', {'callback':'alert("2 sec wait")', 'packages':['corechart']})}, 2000);
这演示了延迟警报窗口的2秒等待
Kat*_*tai 32
你只需要定义一个回调,它就不会清除页面(可能是google.load()的旧版本,但显然新的版本不会与回调一起使用).这是我加载"google.charts"lib时的简化示例:
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!
}
} )
}
在使用whitout回调()时,我仍然得到空白页面 - 但是回调,它对我来说是固定的.
注意:以下内容有利于避免时间延迟 - 它只是及时.所有脚本(需要它)通常都可以使用该示例,但特别是与Greasemonkey一起使用.它还使用Google图表API作为示例,但此解决方案超越了其他Google API,可以在任何需要等待脚本加载的地方使用.
使用带有回调的google.load无法解决使用Greasemonkey添加Google图表时的问题.在此过程中(Greasemonkey注入页面),添加了www.google.com/jsapi脚本节点.在为Google的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";