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

103

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

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

javascript google-visualization google-loader

— 恩里科·卡里索（Enrico Carlesso）
source

1

一个好问题，这里是一个链接：friendlybit.com/js/lazy-loading-asyncronous-javascript（换句话说：尚无头绪）

— mindandmedia 2012年

我注意到，document.write（'anything'）也将清除以前的html，也许在settimeout的上下文中文档已不正确？

— mindandmedia 2012年

109

看起来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秒的等待时间以及延迟的警报窗口

— 波
source

我不希望显示警报窗口，是否有任何工作要做？

— Shoib Mohammed 2013年

4

警报只是示例代码片段。可以是任何东西。

— 波

这很棒。我唯一按预期更改的工作是调用drawChart函数而不是alert函数。

— chiurox

只需添加一个空的回调参数即可为我修复。

— 亚当B

32

您只需要定义一个回调，就不会清除页面（也许旧版本的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!
        }
    } )
}

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

— 加泰
source

5

注意：以下内容可避免时间延迟-这是及时的。该示例通常可用于所有脚本（需要），但特别适用于Greasemonkey。它还以Google图表API为例，但是该解决方案不仅仅适用于其他Google API，而且可以在需要等待脚本加载的任何地方使用。

在使用Greasemonkey添加Google图表时，将google.load与回调一起使用无法解决问题。在此过程中（将Grasemonkey注入到页面中），添加了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";

— 码孔
source

2

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

$.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（）

— 卡米尔（KamilMierzyński）
source

2

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

例如，这不起作用：

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

但这确实是：

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

— 奎因助手
source