javascript - internet - js ajax without jquery
¿Cómo "habilitar" los elementos HTML5 en IE 8 que fueron insertados por la llamada AJAX? (5)
Vea la solución al final de la pregunta.
IE 8 (y más bajo) no funciona bien con elementos desconocidos (es decir, elementos HTML5), uno no puede diseñarlos o acceder a la mayoría de sus accesorios. Son numerosas las alternativas para esto, por ejemplo: http://remysharp.com/2009/01/07/html5-enabling-script/
El problema es que esto funciona muy bien para HTML estático que estaba disponible en la carga de la página, pero cuando uno crea elementos HTML5 después (por ejemplo llamada AJAX que los contiene, o simplemente creando con JS), marcará estos elementos recién agregados como HTMLUnknownElement como supone que HTMLGenericElement (en depurador de IE).
¿Alguien sabe un poco de trabajo para eso, para que los elementos recién agregados sean reconocidos / habilitados por IE 8?
Aquí hay una página de prueba:
<html><head><title>TIME TEST</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<time>some time</time>
<hr>
<script type="text/javascript">
$("time").text("WORKS GREAT");
$("body").append("<time>NEW ELEMENT</time>"); //simulates AJAX callback insertion
$("time").text("UPDATE");
</script>
</body>
</html>
En IE verá: ACTUALIZACIÓN y NUEVO ELEMENTO. En cualquier otro navegador moderno, verá ACTUALIZACIÓN y ACTUALIZACIÓN
Simplemente dejando esto para contribuir a la discusión.
El script siempre que @Gidon parece no funcionar en IE8 (probado en dos máquinas diferentes). Tuve que rehacer el plugin jQuery de otra manera, ver a continuación:
/**
* Enable HTML5 Elements on the fly. IE needs to create html5 elements every time.
* @author Gidon
* @author Julio Vedovatto <[email protected]>
* @see http://.com/questions/2363040/how-to-enable-html5-elements-in-ie-that-were-inserted-by-ajax-call
*/
(function ($) {
jQuery.fn.html5Enabler = function () {
var element = this;
if (!$.browser.msie)
return element;
$.each(
[''abbr'',''article'',''aside'',''audio'',''canvas'',''details'',''figcaption'',''figure'',''footer'',''header'',''hgroup'',''mark'',''menu'',''meter'',''nav'',''output'',''progress'',''section'',''summary'',''time'',''video''],
function() {
if ($(element).find(this).size() > 0) {
$(element).find(this).each(function(k,child){
var el = $(document.createElement(child.tagName));
for (var i = 0; i < child.attributes.length; i++)
el.attr(child.attributes[i].nodeName, child.attributes[i].nodeValue);
el.html(child.innerHTML);
$(child).replaceWith(el);
});
}
}
);
};
})(jQuery);
Yo también tuve problemas cuando busqué un montón de HTML que contenía elementos HTML5 del servidor usando AJAX. html5shiv no pudo salvar mi día. Mi plantilla de proyecto está basada en html5boilerplate y usa Modernizr para corregir el comportamiento de las etiquetas HTML5 en IE <9. Después de leer este hilo, tuve una corazonada y conseguí que mi código funcionara.
El código problemático que inyectaba el HTML recién exprimido en el DOM era:
var wrapper = $(''<div />'')
.addClass(''wrapper'')
.html(data.html)
.appendTo(wrapper);
Básicamente lo que sucede aquí es:
- crea un nuevo elemento
- el innerHTML del nuevo elemento se actualiza
- el nuevo elemento con su innerHTML se agrega a un elemento existente en el DOM
Cambiarlo a lo siguiente soluciona mi problema:
var wrapper = $(''<div />'')
.addClass(''wrapper'')
.appendTo(el);
wrapper.html(data.html);
Lo que sucede ahora es:
- crea un nuevo elemento
- el nuevo elemento vacío se agrega a un elemento existente en el DOM
- el innerHTML del elemento recién agregado se actualiza
Ahora, incluso IE7 no tiene más remedio que mostrar elementos HTML5 cargados de forma asíncrona, como yo quiero :)
Gracias Julio, mantendrá tu plugin a mano en caso de que lo necesite en el futuro. Pero por ahora estoy contento de no agregar la sobrecarga de las manipulaciones DOM adicionales.
Tal vez esta solución alternativa también funcione para otras personas.
jQuery tiene algunas formas oscuras y mágicas de crear elementos. Usar document.createElement lugar debería marcar la diferencia:
var time = document.createElement("time");
time.innerHTML = "WORKS GREAT";
document.appendChild(time);
No creo que puedas usar la sintaxis .append() (como .innerHTML += "" ) con HTML5 e IE. El problema no es la capacidad de IE para usar o mostrar los elementos HTML5, sino su capacidad para analizarlos. Siempre que instale un elemento HTML5 mediante programación, debe hacerlo con document.createElement .
tenga en cuenta que la funcionalidad innershiv está integrada en jquery a partir del 1.7 http://blog.jquery.com/2011/11/03/jquery-1-7-released/