web-dev-qa-db-ja.com

google.loadでページが空白になるのはなぜですか？

まあ、これは奇妙に見えますが、解決策を見つけることができません。

なぜこのフィドル http://jsfiddle.net/carlesso/PKkFf/ がページコンテンツを表示し、google.loadが発生するとページが空白になるのですか？

Google.loadがすぐに実行される場合は正常に機能しますが、遅延させることはまったく機能しません。

ここであなたの怠ierな（またはより賢い）ページソース：

<!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>​
javascriptgoogle-visualizationgoogle-loader
103
Enrico Carlesso

Google.loadはdocument.write（）を使用してページにスクリプトを追加しているように見えます。これは、ページの読み込み後に使用すると、htmlを消去します。

これにより、さらに詳しく説明します。 http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

アイデアの1つを使用して、ロードにコールバックを使用して、doc.writeではなくappendを強制的に使用できます。

setTimeout(function(){google.load('visualization', '1', {'callback':'alert("2 sec wait")', 'packages':['corechart']})}, 2000);

これは、遅延アラートウィンドウでの2秒間の待機を示しています

108
wave

コールバックを定義するだけで、ページはクリアされません（おそらく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（）を使用せずに実行すると、まだ空白ページが表示されますが、コールバックを使用すると修正されます。

32
Katai

注：以下は、時間遅延を回避するのに適しています-ちょうど間に合います。この例は一般にすべてのスクリプトで使用できます（必要な場合）が、Greasemonkeyで特に使用されました。また、例としてGoogleチャートAPIを使用しますが、このソリューションは他のGoogle APIにとどまらず、スクリプトの読み込みを待つ必要がある場所であればどこでも使用できます。

Greasemonkeyを使用してGoogleグラフを追加する場合、コールバックでgoogle.loadを使用しても問題は解決しませんでした。プロセス（ページに挿入されたGreasemonkey）で、www.google.com/jsapiスクリプトノードが追加されます。 Googleのjsapi javascriptにこの要素を追加すると、挿入された（またはページの）スクリプトはgoogle.loadコマンド（追加されたノードにロードする必要がある）を使用する準備ができましたが、このjsapiスクリプトはまだロードされませんでした。タイムアウトの設定は機能しましたが、タイムアウトは、Google jsapiスクリプトロードの挿入/ページスクリプトとのタイミングレースの回避策にすぎませんでした。スクリプトがgoogle.load（および場合によってはgoogle.setOnLoadCallback）を実行する場所を移動すると、タイミングの競合状況に影響する可能性があります。以下は、google.loadを呼び出す前にgoogle script要素がロードされるのを待つソリューションを提供します。次に例を示します。

// ********* 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";
5
codeaperature

JQuery google.load(…)ラッパー内で$(document).ready(…)を移動しようとしたときにこの問題が発生しました。 google.load(…)をready関数の外に戻すと、すぐに実行され、問題は解決しました。

たとえば、これは機能しません：

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

しかし、これは：

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

タイムアウトを設定する必要はありません。別の方法があります：

$.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（）が実行されます

2
Kamil Mierzyński