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

— エンリコ・カルレッソ
ソース

1

いい質問、ここにリンクがあります：friendlybit.com/js/lazy-loading-asyncronous-javascript（つまり、まだ手がかりはありません）

— mindandmedia

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

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

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

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

— 波
ソース

警告ウィンドウを表示したくないのですが、これを回避する方法はありますか？

— Shoib Mohammed A 2013

4

アラートはコードのほんの一例です。何でもかまいません。

— 波

これは素晴らしい。期待どおりに機能するように変更した唯一のことは、アラート関数の代わりにdrawChart関数を呼び出すことでした。

— chiurox 2013年

空のコールバックパラメータを追加するだけで修正されました。

— Adam B、

32

コールバックを定義するだけで、ページがクリアされません（おそらく古いバージョンの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!
        }
    } )
}

callback（）を実行しても、空白のページが表示されますが、callbackを使用すると修正されます。

— カタイ
ソース

5

注：以下は時間遅延を回避するのに適しています-ちょうど間に合います。この例は、一般的にすべてのスクリプトで使用できます（必要です）が、特に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";

— コーデック
ソース

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

— カミル・ミエルジスキ
ソース

2

google.load(…)jQuery $(document).ready(…)ラッパー内を移動しようとしたときにこの問題が発生しました。移動google.load(…) 、それはすぐに問題を解決し実行ので、レディ機能の裏の外側を。

たとえば、これは動作しません：

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

しかし、これは：

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

— クインコメンダント
ソース