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

102

Vâng, điều này có vẻ lạ nhưng tôi không thể tìm thấy một giải pháp.Tại sao google.load khiến trang của tôi bị trống?

Tại sao thế giới thực hiện điều này f2 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 trì hoãn đó không hoạt động.

Đây mã nguồn trang web cho lazier (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>

Nguồn

2012-03-01 Enrico Carlesso

đẹp câu hỏi, đây là một liên kết: http://friendlybit.com/js/lazy-loading -asyncronous-javascript/(nói cách khác: chưa có đầu mối) – mindandmedia

tôi nhận thấy rằng document.write ('bất cứ điều gì') nào cũng sẽ xóa html trước đó, có thể tài liệu nằm ngoài khoảng trống trong bối cảnh định giờ? – mindandmedia

106

Hình như google.load được thêm kịch bản để trang bằng cách sử dụng một document.write(), mà nếu được sử dụng sau khi tải trang, xóa sạch html.

này giải thích sâu hơn: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

Sử dụng một trong những ý tưởng, bạn có thể sử dụng một callback cho tải để buộc nó sử dụng append hơn doc.write:

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

này thể hiện thời gian đợi thứ hai với cửa sổ cảnh báo bị trì hoãn

Nguồn

2012-03-01 16:49:52 wave

Tôi không muốn cửa sổ cảnh báo được hiển thị là có bất kỳ công việc arround để làm điều đó? –

Thông báo chỉ là một đoạn mã mẫu. Nó có thể là bất cứ thứ gì. – wave

Điều này thật tuyệt. Điều duy nhất tôi thay đổi để làm việc như tôi mong đợi là gọi hàm drawChart thay vì chức năng cảnh báo. – chiurox

Lưu ý: Điều sau đây là tốt để tránh chậm trễ thời gian - đúng lúc. Ví dụ này có thể được sử dụng chung bởi 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 đồ Google làm ví dụ, nhưng giải pháp này vượt xa các API Google khác và có thể được sử dụng ở bất cứ nơi nào bạn cần phải chờ tập lệnh tải.

Sử dụng google.load với gọi lại không giải quyết được vấn đề khi sử dụng Greasemonkey để thêm biểu đồ Google. Trong quá trình (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 được thêm), nhưng tập lệnh jsapi này chưa tải. Đặt thời gian chờ đã hoạt động, nhưng thời gian chờ chỉ là giải pháp cho cuộc đua thời gian tải tập lệnh jsapi của Google 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 hiện google.load (và có thể google.setOnLoadCallback) có thể ảnh hưởng đến tình hình cuộc đua thời gian. Sau đây là một giải pháp chờ đợi cho phần tử google script tải trước khi gọi google.load. Dưới đâ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";

Nguồn

2014-02-10 00:17:29 codeaperature

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

Khi làm việc đó whitout callback(), tôi vẫn nhận được trang trống quá - nhưng với gọi lại, nó cố định cho tôi.

Nguồn

2014-07-27 11:04:48 Katai

Điều này cũng phù hợp với tôi. Nhưng tại sao nó hoạt động? –

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 thích:

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

sẽ được thực hiện sau khi kịch bản tải jsapi thành công, sau đó alert() sẽ được thực hiện sau khi google thành công.load()

Nguồn

2014-11-03 09:57:51

Tôi gặp sự cố này khi cố gắng di chuyển google.load(…) bên trong trình bao bọc jQuery $(document).ready(…). Di chuyển các google.load(…) trở lại bên ngoài của chức năng sẵn sàng để nó thực hiện ngay lập tức giải quyết vấn đề.

Ví dụ, điều này không làm việc:

$(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() { 
    // … 
});

Nguồn

2015-07-14 19:30:35

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

Trả lời

Các vấn đề liên quan