为什么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() { // … }); 
Interesting Posts