¿Por qué, por ejemplo, refluye DOM cuando se encuentra con los elementos fbml <fb:xxx> cuando se utilizan correctamente los fml xmlns?

Tengo una página que contiene una serie de botones "Me gusta" de Facebook, incrustados mediante la técnica fbml en línea (en lugar de iframe). Suficientemente simple. La página funciona bien, todo funciona como se espera.¿Por qué, por ejemplo, refluye DOM cuando se encuentra con los elementos fbml <fb:xxx> cuando se utilizan correctamente los fml xmlns?

Sin embargo ...

Una vez que añadir la declaración de espacio de nombres xmlns:fb="http://www.facebook.com/2008/fbml" al documento Estoy notando una degradación radical de la página inicial tiempos de render en IE. Una inspección más cercana (usando las herramientas de desarrollador ie8) revela que todo el DOM parece ser "refrescante" o "refluir" una y otra vez, durante un breve período después de que la página se haya cargado inicialmente. Un poco más de borrado revela que el número de reflujos es aparentemente proporcional al número de elementos <fb:xxx> en el documento.

Al eliminar la declaración xmlns, el problema desaparece.

¿Alguien ha experimentado esto antes?

ACTUALIZACIÓN:

Algunos de excavación más ha revelado algunos detalles más ... La cuestión es de hecho que IE se vuelve a fluir a la página, incluyendo volver a ejecutar las secuencias de comandos en línea y así sucesivamente. La causa no parece ser la inclusión de las xmlns per se, sino la representación xfbml de los botones mismos. Agregar los xmlns simplemente activó el renderizado xfbml, sin los xmlns, los botones que nunca se procesaron en primer lugar. El siguiente marcado ilustra el problema.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> 
    <head> 
    <script type="text/javascript"> 
     alert('some inline js'); 
    </script> 
    </head> 
    <body> 
    <div id="fb-root"></div> 

    <div> 
     <fb:like href="http://example.local/1" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light"></fb:like> 
     <fb:like href="http://example.local/2" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light"></fb:like> 
     <fb:like href="http://example.local/3" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light"></fb:like> 
    </div> 

    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script> 

    </body> 
</html>

Cuando se ejecuta en ie, el ejemplo anterior genera 3 alertas, esperaría ver solo una.

Fuente

2011-05-04 Bernos

Para el registro, es que esto ocurra [aquí] (http://jsfiddle.net/alexdickson/NStxL/) ¿para ti también? – alex

@alex Solo recibo la alerta en IE9, ya no tengo IE8 para probar – Phil

Parece que está experimentando facebook bug 9777. Ha existido desde el comienzo del nuevo all.js. Creo que ha habido un par de intentos para solucionarlo, lo que realmente no ha funcionado. Parece que la prioridad acaba de subir un escalón la semana pasada. Veamos si se soluciona pronto.

En cualquier caso, el problema que está viendo no es causado por el árbol DOM que se está modificando. De hecho, el javascript que se activa no está ni siquiera en su página ... su página "superior" que es.

La secuencia de comandos está en los iframes creados por el script de Facebook en lugar de los elementos fb:like.

En lugar de "alguna línea js", si su alert muestra lo siguiente:

alert("This: " + window.location.href + "\nTop: " + window.top.location.href);

verá donde está viniendo. En el "Este" URL verá fb_xd_fragment junto con un montón de parámetros anexados a su url. Básicamente, el script de Facebook está redireccionando cada ventana iframe a las URL que está viendo, lo que está iniciando sus scripts.

En http://developers.facebook.com/docs/reference/javascript/FB.init/ Discuten el URL del canal personalizada parámetro (channelURL) init como solución alternativa, que no parece haber funcionado para muchas personas. Y muchas personas están recibiendo inundaciones de solicitudes en el camino que proporcionan como channelURL.

Sólo un pensamiento ... Ha intentado cargar el "similares" botones utilizando el método de marco flotante? ¿Fue eso más rápido?

De lo contrario, podría intentar cargar los perezosos all.js guión ...

(function() { 
    var e = document.createElement('script'); 
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1'; 
    e.async = true; 
    document.getElementById('fb-root').appendChild(e); 
}());

Fuente

2011-05-16 00:36:38 musaul

¿Por qué, por ejemplo, refluye DOM cuando se encuentra con los elementos fbml <fb:xxx> cuando se utilizan correctamente los fml xmlns?

Respuesta

Cuestiones relacionadas