Mengapa google.load menyebabkan halaman saya kosong?

103

Ini terlihat aneh tetapi saya tidak dapat menemukan solusinya.

Mengapa biola ini http://jsfiddle.net/carlesso/PKkFf/ menampilkan konten halaman dan, kemudian ketika google.load muncul, halaman menjadi kosong?

Ini berfungsi dengan baik jika google.load segera dilakukan, tetapi menunda tidak berfungsi sama sekali.

Di sini sumber halaman untuk Anda yang lebih malas (atau lebih pintar):

<!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

— Enrico Carlesso
sumber

1

pertanyaan yang bagus, ini tautannya: friendlybit.com/js/lazy-loading-asyncronous-javascript (dengan kata lain: belum ada petunjuk)

— mindandmedia

Saya perhatikan, document.write ('anything') akan menghapus html sebelumnya juga, mungkin dokumen rusak dalam konteks settimeout?

— mindandmedia

109

Sepertinya google.load menambahkan skrip ke halaman menggunakan document.write (), yang jika digunakan setelah halaman dimuat, html akan dihapus.

Ini menjelaskan lebih mendalam: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

Menggunakan salah satu ide, Anda bisa menggunakan callback untuk memuat untuk memaksanya menggunakan append daripada doc.write:

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

Ini menunjukkan waktu tunggu 2 detik dengan jendela peringatan tertunda

— gelombang
sumber

Saya tidak ingin jendela peringatan ditampilkan apakah ada pekerjaan yang dilakukan untuk melakukan itu?

— Shoib Mohammed A

4

Peringatan itu hanyalah cuplikan contoh kode. Bisa apa saja.

— gelombang

Ini bagus. Satu-satunya hal yang saya ubah agar berfungsi seperti yang saya harapkan adalah memanggil fungsi drawChart alih-alih fungsi peringatan.

— chiurox

Hanya menambahkan parameter panggilan balik kosong memperbaikinya untuk saya.

— Adam B

32

Anda hanya perlu menentukan callback, dan itu tidak akan menghapus halaman (mungkin versi lama google.load () melakukannya, tetapi tampaknya yang baru tidak jika digunakan dengan callback). Berikut adalah contoh yang disederhanakan saat saya memuat lib "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!
        }
    } )
}

Saat melakukannya whitout callback (), saya masih mendapatkan halaman kosong juga - tetapi dengan callback, itu sudah diperbaiki untuk saya.

— Katai
sumber

5

Catatan: Berikut ini bagus untuk menghindari penundaan waktu - ini tepat waktu. Contoh ini dapat digunakan secara umum oleh semua skrip (membutuhkannya), tetapi secara khusus digunakan dengan Greasemonkey. Ini juga menggunakan API bagan Google sebagai contoh, tetapi solusi ini melampaui API Google lainnya dan dapat digunakan di mana pun Anda perlu menunggu skrip dimuat.

Menggunakan google.load dengan callback tidak menyelesaikan masalah saat menggunakan Greasemonkey untuk menambahkan bagan Google. Dalam proses (Greasemonkey dimasukkan ke halaman), node skrip www.google.com/jsapi ditambahkan. Setelah menambahkan elemen ini untuk javascript jsapi Google, skrip yang dimasukkan (atau halaman) siap menggunakan perintah google.load (yang perlu dimuat di simpul yang ditambahkan), tetapi skrip jsapi ini belum dimuat. Menyetel batas waktu berhasil, tetapi batas waktu hanyalah solusi untuk balapan waktu pemuatan skrip Google jsapi dengan skrip / halaman yang dimasukkan. Bergerak di sekitar tempat skrip mengeksekusi google.load (dan mungkin google.setOnLoadCallback) dapat memengaruhi situasi balapan waktu. Berikut ini menawarkan solusi yang menunggu elemen skrip google dimuat sebelum memanggil google.load. Berikut ini contohnya:

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

— codeaperature
sumber

2

Anda tidak perlu menyetel waktu tunggu. Ada cara lain:

$.getScript("https://www.google.com/jsapi", function () {
     google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
});

Penjelasan:

 function () {
     google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
 }

akan dijalankan setelah berhasil memuat skrip JSAPI, kemudian alert () akan dijalankan setelah google.load () berhasil

— Kamil Mierzyński
sumber

2

Saya mengalami masalah ini ketika mencoba memindahkan bagian google.load(…)dalam $(document).ready(…)pembungkus jQuery . Memindahkan bagian google.load(…) belakang di luar fungsi siap sehingga segera dijalankan menyelesaikan masalah.

Misalnya, ini tidak berhasil:

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

Tapi ini memang:

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

— Quinn Comendant
sumber