为什么google.load会导致我的页面变为空白?
好吧,这看起来很奇怪,但我无法找到解决方案。为什么google.load会导致我的页面变为空白?
世界为什么会出现这种小提琴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>
看起来像的google.load使用document.write()的,而如果后使用添加脚本到页面页面加载,抹掉了HTML。
这就解释了更深入: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6
使用的一个想法,你可以使用一个回调的负荷,迫使它使用附加,而不是doc.write:
setTimeout(function(){google.load('visualization', '1', {'callback':'alert("2 sec wait")', 'packages':['corechart']})}, 2000);
这演示与延迟警告窗口
注2秒钟的等待:以下为好,以避免时间延迟 - 它只是在时间。这个例子通常可以被所有的脚本使用(需要它),但特别与Greasemonkey一起使用。它还使用Google图表API作为示例,但该解决方案不仅限于其他Google API,还可以用于需要等待脚本加载的任何位置。
使用的google.load有回调并没有解决这个问题用的Greasemonkey时添加谷歌的图表。在这个过程中(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";
你只需要定义一个回调,并没有也不会清除页面(也许是旧版本的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回调(),我仍然得到空白页面太 - 但回调,它的固定我。
这对我也适用。但是它为什么起作用? – 2015-07-14 19:25:59
你并不需要设置超时时间。还有另一种方法:
$.getScript("https://www.google.com/jsapi", function() {
google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
});
说明:
function() {
google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
}
将成功加载JSAPI脚本后执行,则()将谷歌成功后执行警戒。加载()
我试图在jQuery $(document).ready(…)
包装中移动google.load(…)
时遇到此问题。将google.load(…)
移回ready函数的外部,以便立即解决问题。
例如,这不起作用:
$(document).ready(function() {
google.load('visualization', '1', {packages: ['corechart']});
});
但这:
google.load('visualization', '1', {packages: ['corechart']});
$(document).ready(function() {
// …
});
有趣的问题,这里有一个链接:http://friendlybit.com/js/lazy-loading -asyncronous-javascript /(换句话说:还没有线索) – mindandmedia 2012-03-01 16:23:49
我注意到,那document.write('anything')也会清除以前的html,也许文档在settimeout的上下文中不合时宜? – mindandmedia 2012-03-01 16:29:21