javascript - example - google chart中文




為什麼google.load會導致我的頁面變為空白? (4)

那麼,這看起來很奇怪,但我無法找到解決方案。

為什麼在這個世界上,這個小提琴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>​

你不需要設置超時。 還有另一種方式:

$.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腳本後執行,然後alert()將在成功執行google.load()後執行


你只需要定義一個回調函數,並且它不會清除頁面(也許舊版本的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!
        }
    } )
}

在做回調函數()時,我仍然可以看到空白頁 - 但是回調函數對我來說是固定的。


注意:以下是避免時間延遲的好方法 - 這只是時間。 這個例子通常可以被所有的腳本使用(需要它),但特別與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";

看起來google.load使用document.write()將該腳本添加到頁面,如果在頁面加載後使用該腳本,則會清除html。

這更詳細地解釋: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6 : 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秒鐘等待





google-loader