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

102

好吧，这看起来很奇怪，但我无法找到解决方案。为什么google.load会导致我的页面变为空白？

世界为什么会出现这种小提琴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>

来源

2012-03-01 Enrico Carlesso

有趣的问题，这里有一个链接：http://friendlybit.com/js/lazy-loading -asyncronous-javascript /（换句话说：还没有线索） – mindandmedia 2012-03-01 16:23:49

我注意到，那document.write（'anything'）也会清除以前的html，也许文档在settimeout的上下文中不合时宜？ – mindandmedia 2012-03-01 16:29:21

106

看起来像的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);

这演示与延迟警告窗口

来源

2012-03-01 16:49:52 wave

我不想让警报窗口显示是否有任何工作要做？ – 2013-08-23 07:12:14

该警报只是一个示例代码片段。它可以是任何东西。 – wave 2013-10-22 13:53:14

这太好了。我改变工作的唯一的事情就是调用drawChart函数而不是alert函数。 – chiurox 2013-11-18 12:31:17

注2秒钟的等待：以下为好，以避免时间延迟 - 它只是在时间。这个例子通常可以被所有的脚本使用（需要它），但特别与Greasemonkey一起使用。它还使用Google图表API作为示例，但该解决方案不仅限于其他Google API，还可以用于需要等待脚本加载的任何位置。

使用的google.load有回调并没有解决这个问题用的Greasemonkey时添加谷歌的图表。在这个过程中（Greasemonkey注入页面），添加了www.google.com/jsapi脚本节点。加入此元素为谷歌的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";

来源

2014-02-10 00:17:29 codeaperature

你只需要定义一个回调，并没有也不会清除页面（也许是旧版本的google.load的（），但显然新的做，如果有未使用回电话）。在这里，当我加载“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! 
     } 
    }) 
}

当做whitout回调（），我仍然得到空白页面太 - 但回调，它的固定我。

来源

2014-07-27 11:04:48 Katai

这对我也适用。但是它为什么起作用？ – 2015-07-14 19:25:59

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

$.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脚本后执行，则（）将谷歌成功后执行警戒。加载（）

来源

2014-11-03 09:57:51

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

来源

2015-07-14 19:30:35

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

回答

相关问题