[javascript] google.load로 인해 내 페이지가 비어있는 이유는 무엇입니까?

참고 : 다음은 시간 지연을 피하는 데 유용합니다. 이 예제는 일반적으로 모든 스크립트 (필요한)에서 사용할 수 있지만 특히 Greasemonkey와 함께 사용되었습니다. 또한 Google 차트 API를 예로 사용하지만이 솔루션은 다른 Google API를 넘어서서 스크립트가로드 될 때까지 기다려야하는 모든 곳에서 사용할 수 있습니다.

콜백과 함께 google.load를 사용하면 Greasemonkey를 사용하여 Google 차트를 추가 할 때 문제가 해결되지 않았습니다. 프로세스 (Greasemonkey가 페이지에 삽입 됨)에서 www.google.com/jsapi 스크립트 노드가 추가됩니다. Google의 jsapi javascript에 대해이 요소를 추가하면 삽입 된 (또는 페이지) 스크립트가 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";

답변

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

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

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

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