javascript - page - prettyPrint() no recibe llamadas en la carga de la página
title html css (2)
Estoy intentando pretender mi código en Blogger. He vinculado los archivos de Google JS y CSS a mi plantilla. El problema es que quiero que el código sea prettificado en la carga de la página, así que agrego prettyPrint(); para cargar el evento de la página en la plantilla.
<body onload="prettyPrint();">
Este código no se ejecuta. Sin embargo, si escribo prettyPrint () manualmente en la consola, mis códigos se verifican correctamente. ¿Bloquea la plantilla de blogger la invocación de funciones JS manualmente?
EDITAR Consigo que funcione invocando manualmente la función en cada publicación en la que necesito un código de certificación (ver más abajo). Aún así, quiero saber por qué no puedo hacerlo en la plantilla.
<pre class="prettyprint linenums lang-js">
function testCode(){
}
</pre>
// I have to do this in every post :-s
<script type="text/javascript">
prettyPrint();
</script>
EDITAR 2 El prettyPrint() README dijo que no debería usar prettyPrint() directamente como manejador, sino envolverlo en un cierre. Así que agregué este código, similar al ejemplo en README, en mi <head> pero sin éxito.
<script type=''text/javascript''>
window.addEventListener(''load'', function (event) { prettyPrint() }, false);
</script>
O
<script type=''text/javascript''>
document.addEventListener(''DOMContentLoaded'',function() {
prettyPrint();
});
</script>
EDITAR 3 Mi plantilla HTML es solo la plantilla predeterminada de Dynamics View (Classic) con la biblioteca prettify agregada como se explicó anteriormente.
EDITAR 4 Aquí hay un enlace para demostrar el problema: http://testprettyprint.blogspot.com/2013/02/blog-post.html : el bloque de código no se precede automáticamente, pero si abre la consola de Chrome y escribe prettyPrint () Los códigos serán resaltados correctamente.
EDIT 5 La razón por la que creo que es mi problema, no de los bloggers, porque este tipo aún tiene su código prettified utilizando la misma técnica: http://errorbuster.blogspot.com/2012/07/prettify-syntax-highlighter-for-blogger.html
EDITAR 6 Como ha señalado Jeffery To en su respuesta, Dynamics View carga el contenido del blog con AJAX, por lo que cualquier llamada JS en la carga de documentos se ejecutará ANTES de que se cargue el contenido real. Por lo tanto, cualquier JavaScript realizado en el contenido real del blog, no en el documento, no es válido. Así que supongo que la pregunta ahora es cómo conectarse a Dynamics View ajax:complete evento ajax:complete , si existe tal cosa, pero dudo que la haya. Gracias a todos los que han respondido. No estoy seguro de si esto se puede contar como un error, pero presentaré un problema con blogger.
CONCLUSIÓN Por favor, lea la respuesta de Jeffery To. Encontró el evento para invocar la función.
Creo que su página de prueba está utilizando las "plantillas Ajax" de Blogger (no estoy seguro de cuál es el nombre oficial), mientras que el otro enlace que ha publicado está usando plantillas clásicas.
Si vuelve a cargar la página de prueba, primero verá el logotipo de Blogger en la mitad de la página, luego aparecerá su contenido. Si ve la fuente de la página de prueba, verá una gran cantidad de código, pero no su contenido. Creo que con las plantillas de diseño, primero se ejecuta el código de Blogger, luego se recupera tu contenido usando Ajax. Cualquier código de JavaScript que se ejecute en el documento listo (DOMContentLoaded) o en la carga de la ventana se ejecutará antes de que su contenido se cargue en la página.
Creo que si agrega un widget HTML / Javascript a la página (después de su bloque de contenido), luego incluye una llamada a prettyPrint() dentro de ese widget, debe llamarse cada vez que se muestre una publicación.
Actualización: el nombre oficial de esta plantilla es "Dynamic Views", y parece que el widget HTML / JavaScript no es compatible con Dynamic Views. No puedo encontrar ninguna mención de una API que te permita conectar el JavaScript de Blogger, por lo que creo que la respuesta (al menos por ahora) es que no es posible agregar un código de nivel de plantilla para hacer lo que quieras. La manera más práctica sería incluir una etiqueta de script con prettyPrint() en cada publicación :-(
Actualización 2: He rastreado el código de Blogger y creo que he encontrado un evento adecuado (y vinculable). Intente incluir esto después del código de Dynamic Views (en el elemento head , después de las etiquetas <script src=''//www.blogblog.com/dynamicviews/...''></script> ):
<script>
$(window.blogger.ui()).on(''viewitem'', function (event, post, element) {
prettyPrint();
});
</script>
El evento viewitem se activa cada vez que el usuario ve un elemento (lo que puede suceder varias veces durante la vida útil de la página). El argumento del element es un objeto jQuery del elemento contenedor del elemento, por lo que si desea guardar prettyPrint() un poco de tiempo, puede hacer esto:
<script>
$(window.blogger.ui()).on(''viewitem'', function (event, post, element) {
element.each(function () {
// first argument is a callback function
// second argument is a root element or document to check
prettyPrint(null, this);
});
});
</script>
Puede haber algunos problemas con los fragmentos de arriba. Si engancha un evento con <body onload="..."> otros códigos javascript podrían sobrescribirlo. Dom.addEventListener no funcionará con Internet Explorer, debe usar Dom.attachEvent allí. Básicamente, cuando no o no puedo usar un marco javascript, como jquery para el manejo de eventos, luego uso mi código antiguo para el manejo de eventos onload:
// window.ready
function register_onload(func){
var oldOnload = window.onload;
if(typeof(oldOnload) == ''function''){
window.onload = function(){
oldOnload();
func();
}
}else{
window.onload = function(){
func();
}
}
}
// document.ready
function register_onload(func){
var old_onload = document.onreadystatechange;
if(typeof old_onload == ''function''){
document.onreadystatechange = function(){
old_onload();
if(document.readyState == ''complete''){
func();
}
}
}else{
document.onreadystatechange = function(){
if(document.readyState == ''complete''){
func();
}
}
}
}
Adjunto dos códigos que funcionan de formas ligeramente diferentes. Principalmente, si utiliza document.ready (segundo fragmento), el código enganchado se ejecutará cuando se cargue la página y se creen todos los elementos HTML. Pero en document.ready, no hay garantía de que todos los códigos javasript y css también se carguen, por lo que si desea que se carguen todos los códigos y scripts, entonces necesita window.ready (primer fragmento).
Para su situación, creo que necesita el segundo, document.ready snippet y puede usarlo de la siguiente manera:
// copy 2nd snippet here...
register_onload(function(){
prettyPrint();
});
También te recomiendo que pongas tu código javacript entre los símbolos /*<![CDATA[*/ ... /*]]>*/ , para que tu código final se vea como:
<script type="text/javascript">/*<![CDATA[*/
// shorter version of the 2nd snippet
function register_onload(f){
var d=document,o=d.onreadystatechange;
if(typeof(o)==''function''){
d.onreadystatechange=function(){o();if(d.readyState==''complete'')f();}
}else{
d.onreadystatechange=function(){if(d.readyState==''complete'')f();}
}
}
register_onload(function(){
prettyPrint();
});
/*]]>*/</script>
Espero que esto te ayude a resolver tu problema.