为什么google.load会导致我的页面变为空白？

那么，这看起来很奇怪，但我无法find解决scheme。

为什么在这个世界上这个小提琴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

使用其中一个想法，你可以使用一个callback来加载，而不是使用doc.write来强制使用append：

 setTimeout(function(){google.load('visualization', '1', {'callback':'alert("2 sec wait")', 'packages':['corechart']})}, 2000);

这显示了延迟警报窗口的2秒钟等待

你只需要定义一个callback函数，并且不会清除页面（可能是老版本的google.load（），但是显然，如果使用callback函数，新版本不会）。这里有一个简单的例子，当我加载“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! } } ) }

在做这个事情的时候，我还是得到了空白页面 – 但是callback函数对我来说是固定的。

注意：以下是避免时间延迟的好方法 – 这只是时间。这个例子通常可以被所有脚本使用（需要它），但是特别与Greasemonkey一起使用。它也使用Google图表API作为示例，但是这个解决scheme超越了其他Google API，可以在需要等待脚本加载的任何地方使用。

在callback中使用google.load并不能解决使用Greasemonkey添加Google图表的问题。在这个过程中（Greasemonkey注入页面），添加了www.google.com/jsapi脚本节点。为Google的jsapi javascript添加这个元素后，注入的（或页面）脚本就可以使用google.load命令（需要在添加的节点中加载），但是这个jsapi脚本还没有加载。设置超时工作，但超时只是一个解决方法，谷歌jsapi脚本加载与注入/页面脚本的时间竞赛。在脚本执行google.load（也可能是google.setOnLoadCallback）的地方移动会影响计时竞赛的情况。下面介绍一个在调用google.load之前等待google脚本元素加载的解决scheme。这里是一个例子：

 // ********* 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";

你不需要设置超时。还有另一种方法：

 $.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脚本后执行，然后alert（）会在成功执行google.load（）之后执行

我试图在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() { // … });