爲什麼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會導致我的頁面變爲空白？

回答

相關問題