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

【问题标题】：Why does google.load cause my page to go blank?为什么 google.load 会导致我的页面变为空白？
【发布时间】：2012-03-01 16:09:16
【问题描述】：

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

到底为什么这个小提琴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>

【问题讨论】：

好问题，这里有一个链接：friendlybit.com/js/lazy-loading-asyncronous-javascript（换句话说：还没有线索）
我注意到，document.write('anything') 也会清除以前的 html，也许文档在 settimeout 的上下文中不正常？

标签： javascript google-visualization google-loader

【解决方案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 秒等待

【讨论】：

我不想显示警报窗口，是否有任何工作可以做到这一点？
警报只是一个示例 sn-p 代码。它可以是任何东西。
这很棒。我改变的唯一一件事是调用 drawChart 函数而不是 alert 函数。
只需添加一个空的回调参数就可以为我修复它。

【解决方案2】：

你只需要定义一个回调，它不会清除页面（也许旧版本的 google.load() 会这样做，但如果与回调一起使用，显然新版本不会）。这是我加载“google.charts”库时的简化示例：

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!
        }
    } )
}

在没有回调（）的情况下，我仍然会得到空白页 - 但使用回调，它对我来说是固定的。

【讨论】：

【解决方案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";

【讨论】：

【解决方案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()

【讨论】：

【解决方案5】：

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

例如，这不起作用：

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

但这确实：

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

【讨论】：