javascript - mostrar - ¿Por qué google.load causa que mi página quede en blanco?
ejecutar javascript despues de cargar pagina (5)
Bueno, esto parece extraño, pero no puedo encontrar una solución.
¿Por qué en el mundo este violín http://jsfiddle.net/carlesso/PKkFf/ muestra el contenido de la página y, cuando ocurre google.load, la página queda en blanco?
Funciona bien si google.load se realiza de inmediato, pero tenerlo retrasado no funciona en absoluto.
Aquí la fuente de la página para el lazier (o más inteligente) de usted:
<!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>
Encontré este problema al intentar mover un google.load(…) dentro de un contenedor jQuery $(document).ready(…) . Al mover el google.load(…) fuera de la función lista para que se ejecute, se solucionó el problema de inmediato.
Por ejemplo, esto no funciona:
$(document).ready(function() {
google.load(''visualization'', ''1'', {packages: [''corechart'']});
});
Pero esto hace:
google.load(''visualization'', ''1'', {packages: [''corechart'']});
$(document).ready(function() {
// …
});
No es necesario configurar el tiempo de espera. Hay otra manera:
$.getScript("https://www.google.com/jsapi", function () {
google.load(''visualization'', ''1'', { ''callback'': ''alert()'', ''packages'': [''corechart''] });
});
Explicación:
function () {
google.load(''visualization'', ''1'', { ''callback'': ''alert()'', ''packages'': [''corechart''] });
}
se ejecutará después de la carga exitosa de la secuencia de comandos JSAPI, luego se ejecutará la alerta () después de google.load () exitoso
Nota: Lo siguiente es bueno para evitar un retraso: es justo a tiempo. El ejemplo puede ser usado generalmente por todos los scripts (que lo necesiten), pero se usó particularmente con Greasemonkey. También utiliza la API de Google Chart como ejemplo, pero esta solución va más allá de otras API de Google y se puede usar en cualquier lugar donde necesite esperar a que se cargue un script.
El uso de google.load con una devolución de llamada no resolvió el problema al usar Greasemonkey para agregar un gráfico de Google. En el proceso (Greasemonkey se inyecta en la página), se agrega el nodo de script www.google.com/jsapi. Después de agregar este elemento para jsapi javascript de Google, el script inyectado (o página) está listo para usar el comando google.load (que debe cargarse en el nodo agregado), pero este script jsapi aún no se cargó. Configurar el tiempo de espera funcionó, pero el tiempo de espera fue simplemente una solución para la carrera de tiempo de la carga del script de jsapi de Google con el guión inyectado / página. Moverse por el lugar donde se ejecuta un script google.load (y posiblemente google.setOnLoadCallback) puede afectar la situación de carrera de tiempo. A continuación, se presenta una solución que espera a que se cargue el elemento del script de google antes de llamar a google.load. Aquí hay un ejemplo:
// ********* 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";
Parece que google.load está agregando el script a la página usando document.write (), que si se usa después de cargar la página, borra el html.
Esto explica más en profundidad: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6
Utilizando una de las ideas, puede usar una devolución de llamada para la carga para forzarla a usar append en lugar de doc.write:
setTimeout(function(){google.load(''visualization'', ''1'', {''callback'':''alert("2 sec wait")'', ''packages'':[''corechart'']})}, 2000);
Esto demuestra la espera de 2 segundos con la ventana de alerta retrasada
Solo tiene que definir una devolución de llamada, y no borrará la página (tal vez las versiones anteriores de google.load () lo hicieron, pero aparentemente las nuevas no se usan si se usa la devolución de llamada). Aquí un ejemplo simplificado cuando estoy cargando la lib de "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!
}
} )
}
Al hacerlo sin devolución de llamada (), sigo recibiendo la página en blanco también, pero con devolución de llamada, se solucionó.