Tại sao google.load khiến trang của tôi trống?

103

Chà, điều này có vẻ lạ nhưng tôi không thể tìm ra giải pháp.

Tại sao trên thế giới này, trang http://jsfiddle.net/carlesso/PKkFf/ hiển thị nội dung trang và sau đó khi google.load xảy ra, trang sẽ trống?

Nó hoạt động tốt nếu google.load được thực hiện ngay lập tức, nhưng việc nó bị trì hoãn hoàn toàn không hoạt động.

Đây là nguồn trang cho người lười biếng (hoặc thông minh hơn) của bạn:

<!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
nguồn

1

câu hỏi hay, đây là một liên kết: Friendlybit.com/js/lazy-loading-asyncronous-javascript (nói cách khác: chưa có manh mối)

— mindandmedia

tôi nhận thấy rằng document.write ('bất cứ thứ gì') cũng sẽ xóa html trước đó, có thể tài liệu bị lỗi trong bối cảnh settimeout?

— mindandmedia

109

Có vẻ như google.load đang thêm tập lệnh vào trang bằng cách sử dụng document.write (), nếu được sử dụng sau khi tải trang, sẽ xóa sạch html.

Điều này giải thích chi tiết hơn: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

Sử dụng một trong các ý tưởng, bạn có thể sử dụng một lệnh gọi lại cho tải để buộc nó sử dụng append thay vì doc.write:

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

Điều này cho thấy thời gian chờ 2 giây với cửa sổ cảnh báo bị trì hoãn

— làn sóng
nguồn

Tôi không muốn cửa sổ cảnh báo được hiển thị. Có giải pháp nào để làm điều đó không?

— Shoib Mohammed A

4

Cảnh báo chỉ là một đoạn mã ví dụ. Nó có thể là bất cứ thứ gì.

— wave

Điều đó thật tuyệt. Điều duy nhất tôi thay đổi để hoạt động như tôi mong đợi là gọi hàm drawChart thay vì hàm cảnh báo.

— chiurox

Chỉ cần thêm một thông số gọi lại trống đã sửa nó cho tôi.

— Adam B

32

Bạn chỉ cần xác định một lệnh gọi lại và nó sẽ không xóa trang (có thể các phiên bản cũ hơn của google.load () đã làm, nhưng rõ ràng các phiên bản mới thì không nếu được sử dụng với lệnh gọi lại). Dưới đây là một ví dụ đơn giản khi tôi tải 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!
        }
    } )
}

Khi thực hiện nó với callback (), tôi vẫn nhận được trang trống - nhưng với callback, nó đã được khắc phục cho tôi.

— Katai
nguồn

5

Lưu ý: Những điều sau đây rất hữu ích để tránh bị trễ thời gian - đúng lúc. Ví dụ có thể được sử dụng chung cho tất cả các script (cần nó), nhưng đặc biệt được sử dụng với Greasemonkey. Nó cũng sử dụng API biểu đồ của Google làm ví dụ, nhưng giải pháp này vượt xa các API khác của Google và có thể được sử dụng ở bất kỳ nơi nào bạn cần để đợi tập lệnh tải.

Sử dụng google.load với lệnh gọi lại không giải quyết được sự cố khi sử dụng Greasemonkey để thêm biểu đồ Google. Trong quá trình này (Greasemonkey được đưa vào trang), nút tập lệnh www.google.com/jsapi được thêm vào. Sau khi thêm phần tử này cho javascript jsapi của Google, tập lệnh được chèn (hoặc trang) đã sẵn sàng để sử dụng lệnh google.load (cần được tải trong nút đã thêm), nhưng tập lệnh jsapi này vẫn chưa tải. Đặt thời gian chờ hoạt động, nhưng thời gian chờ chỉ là một cách giải quyết cho cuộc chạy đua thời gian tải tập lệnh Google jsapi với tập lệnh được chèn / trang. Di chuyển xung quanh nơi một tập lệnh thực thi google.load (và có thể là google.setOnLoadCallback) có thể ảnh hưởng đến tình huống chạy đua thời gian. Sau đây cung cấp giải pháp đợi phần tử tập lệnh google tải trước khi gọi google.load. Đây là một ví dụ:

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

— nhiệt độ
nguồn

2

Bạn không cần đặt thời gian chờ. Có một cách khác:

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

Giải trình:

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

sẽ được thực thi sau khi tập lệnh JSAPI tải thành công, sau đó alert () sẽ được thực thi sau khi google.load () thành công

— Kamil Mierzyński
nguồn

2

Tôi đã gặp sự cố này khi cố gắng di chuyển google.load(…)bên trong $(document).ready(…)trình bao bọc jQuery . Di chuyển mặt google.load(…) sau ra ngoài của hàm sẵn sàng để nó thực thi ngay lập tức đã giải quyết được vấn đề.

Ví dụ, điều này không hoạt động:

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

Nhưng điều này không:

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

— Quinn Comendant
nguồn