Question

嗯，这看起来很奇怪，但我无法找到解决方案。

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

Answer 1

看起来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秒等待

Answer 2

你只需要定义一个回调，它就不会清除页面（可能是google.load（）的旧版本，但显然新的版本不会与回调一起使用）。这是一个简单的示例，当我加载＆＃34; google.charts＆＃34; 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!
        }
    } )
}

当执行白色回调（）时，我仍然会得到空白页面 - 但是回调后，它已经为我修复了。

Answer 3

注意：以下内容适用于避免延时 - 这是及时的。所有脚本（需要它）通常都可以使用该示例，但特别是与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";

Answer 4

您无需设置超时。还有另一种方式：

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

Answer 5

尝试在jQuery google.load(…)包装器中移动$(document).ready(…)时遇到此问题。将google.load(…)移回到就绪函数之外，使其立即执行，解决了问题。

例如，这不起作用：

$(document).ready(function() {
    google.load('visualization', '1', {packages: ['corechart']});
});

但这样做：

google.load('visualization', '1', {packages: ['corechart']});
$(document).ready(function() {
    // …
});

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

5 个答案: