2012-03-01 17 views
102

अच्छा, यह अजीब लग रहा है लेकिन मुझे कोई समाधान नहीं मिल रहा है।google.load क्यों मेरा पृष्ठ खाली हो जाता है?

दुनिया में यह पहेली क्यों होती है http://jsfiddle.net/carlesso/PKkFf/ पृष्ठ सामग्री दिखाएं और फिर google.load होता है, तो पृष्ठ खाली हो जाता है?

यह ठीक काम करता है अगर google.load तुरंत किया जाता है, लेकिन देरी होने पर यह बिल्कुल काम नहीं करता है।

यहाँ

आप में से lazier के लिए पेज स्रोत (या होशियार):

<!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>​ 
+1

अच्छा सवाल है, यहाँ एक कड़ी है: http://friendlybit.com/js/lazy-loading -सिंक्रोनस-जावास्क्रिप्ट/(दूसरे शब्दों में: अभी तक कोई सुराग नहीं) – mindandmedia

+0

मैंने देखा, कि document.write ('anything') पिछले एचटीएमएल को भी साफ़ कर देगा, हो सकता है कि दस्तावेज़ सेटटाइम के संदर्भ में अजीब हो? – mindandmedia

उत्तर

106

ऐसा लगता है कि google.load एक document.write() है, जो अगर बाद इस्तेमाल का उपयोग कर पृष्ठ में स्क्रिप्ट जोड़ रहा है पेज लोड, एचटीएमएल बाहर मिटा देता है।

यही अधिक गहराई:

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

यह: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

विचारों में से एक का उपयोग करके आप एक कॉलबैक लोड के लिए यह doc.write से संलग्न नहीं बल्कि का उपयोग मजबूर करने के लिए इस्तेमाल कर सकते हैं देरी चेतावनी विंडो

+0

मैं नहीं चाहता कि अलर्ट विंडो प्रदर्शित की जाए, क्या ऐसा करने के लिए कोई काम है? –

+4

अलर्ट कोड का सिर्फ एक उदाहरण स्निपेट था। यह कुछ भी हो सकता है। – wave

+0

यह बहुत अच्छा है। जैसा कि मैंने अपेक्षा की थी, काम करने के लिए एकमात्र चीज चेतावनी समारोह के बजाय drawChart फ़ंक्शन को कॉल करना था। – chiurox

5

नोट: निम्नलिखित समय देरी से बचने के लिए निम्नलिखित अच्छा है - यह समय पर है। उदाहरण आमतौर पर सभी स्क्रिप्ट्स (इसकी आवश्यकता) द्वारा उपयोग किया जा सकता है, लेकिन विशेष रूप से Greasemonkey के साथ प्रयोग किया जाता था। यह एक उदाहरण के रूप में Google चार्ट एपीआई का भी उपयोग करता है, लेकिन यह समाधान अन्य Google एपीआई से आगे जाता है और किसी भी स्क्रिप्ट को लोड होने के लिए प्रतीक्षा करने के लिए कहीं भी इस्तेमाल किया जा सकता है।

कॉलबैक के साथ google.load का उपयोग करके Google चार्ट जोड़ने के लिए Greasemonkey का उपयोग करते समय समस्या का समाधान नहीं हुआ। प्रक्रिया में (Greasemonkey पृष्ठ में इंजेक्शन), www.google.com/jsapi स्क्रिप्ट नोड जोड़ा गया है। Google के jsapi जावास्क्रिप्ट के लिए यह तत्व जोड़ने के बाद, इंजेक्शन (या पृष्ठ) स्क्रिप्ट 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"; 
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! 
     } 
    }) 
} 

जब यह कर whitout कॉलबैक(), मैं अभी भी रिक्त पृष्ठ भी मिल - लेकिन कॉलबैक के साथ, यह मेरे लिए निश्चित होती है।

+2

यह मेरे लिए भी काम करता है। लेकिन यह क्यों काम करता है? –

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 स्क्रिप्ट के बाद निष्पादित किया जाएगा, तो चेतावनी() सफल गूगल के बाद निष्पादित किया जाएगा।लोड()

2

एक jQuery $(document).ready(…) रैपर के अंदर google.load(…) को स्थानांतरित करने का प्रयास करते समय मुझे इस समस्या का सामना करना पड़ा। google.load(…) को तैयार फ़ंक्शन के बाहर वापस ले जाना ताकि यह तुरंत समस्या को हल कर सके।

उदाहरण के लिए, इस काम नहीं करता है:

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

लेकिन इस करता है:

google.load('visualization', '1', {packages: ['corechart']}); 
$(document).ready(function() { 
    // … 
}); 
संबंधित मुद्दे