Google.load मेरे पृष्ठ को खाली क्यों जाता है?

103

खैर, यह अजीब लग रहा है लेकिन मैं इसका हल नहीं ढूंढ पा रहा हूं।

क्यों दुनिया में यह fiddle 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

मैंने देखा, वह दस्तावेज.लेखित ('कुछ भी') पिछले html को भी साफ कर देगा, शायद दस्तावेज़ सेटलमेंट के संदर्भ में बेकार है?

— माइंडमेडिया

109

ऐसा लगता है कि google.load एक डॉक्यूमेंट को लिखकर पेज पर स्क्रिप्ट जोड़ रहा है। (), जो अगर पेज लोड होने के बाद उपयोग किया जाता है, तो html को मिटा देता है।

यह अधिक गहराई से बताता है: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

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

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

यह विलंबित चेतावनी विंडो के साथ 2 सेकंड प्रतीक्षा प्रदर्शित करता है

— लहर
स्रोत

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

— शोएब मोहम्मद एक

4

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

— तरंग

यह भी खूब रही। केवल एक चीज जो मैंने काम की थी, जैसा कि मुझे उम्मीद थी कि अलर्ट फ़ंक्शन के बजाय ड्राचर्ट फ़ंक्शन को कॉल करना है।

— काइरोक्स

बस एक खाली कॉलबैक परम जोड़ने के लिए यह मेरे लिए तय किया।

— एडम बी

32

आपको बस एक कॉलबैक को परिभाषित करना है, और यह पृष्ठ को साफ नहीं करेगा (हो सकता है कि google.load के पुराने संस्करण () ने किया हो, लेकिन जाहिर तौर पर नए लोग कॉलबैक के साथ उपयोग नहीं किए जाते हैं)। यहाँ एक सरल उदाहरण है जब मैं "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!
        }
    } )
}

जब इसे कॉलबैक वाइटआउट () किया जाता है, तो मुझे अभी भी खाली पृष्ठ मिलता है - लेकिन कॉलबैक के साथ, यह मेरे लिए निर्धारित है।

— Katai
स्रोत

5

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

Google चार्ट को जोड़ने के लिए Greasemonkey का उपयोग करते समय कॉलबैक के साथ google.load का उपयोग करने से समस्या हल नहीं हुई। प्रक्रिया में (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";

— codeaperature
स्रोत

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 () के बाद निष्पादित किया जाएगा

— कामिल मायरज़ी
स्रोत

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

— क्विन कॉमेंडेंट
स्रोत