Manipulación de HTML interno en JavaScript

Question

Estoy desarrollando un código de página web, que recupera dinámicamente el contenido del servidor y luego coloca este contenido en nodos contenedores usando algo como

container.innerHTML = content;

A veces tengo que sobrescribir algún contenido anterior en este nodo.Esto funciona bien, hasta que sucede que el contenido anterior ocupaba más espacio vertical del que ocuparía uno nuevo Y un usuario se desplazó por la página hacia abajo, se desplazó más de lo que permitiría el contenido nuevo, siempre que su altura.

En este caso, la página se vuelve a dibujar incorrectamente: quedan algunos artefactos del contenido anterior.Funciona bien, e incluso es posible deshacerse de los artefactos minimizando y restaurando el navegador (o forzando que la ventana se vuelva a dibujar de otra manera), sin embargo, esto no parece muy conveniente.

Estoy probando esto sólo en Safari (este es un sitio web optimizado para iPhone).

¿Alguien tiene la idea de cómo lidiar con esto?

Answer 1

La solución más sencilla que he encontrado sería colocar una etiqueta de anclaje <a> en la cima del div estas editando:

<a name="ajax-div"></a>

Luego, cuando cambias el contenido del div, puedes hacer esto para que el navegador salte a tu etiqueta de anclaje:

location.hash = 'ajax-div';

Use esto para asegurarse de que el usuario no se desplace demasiado hacia abajo cuando actualice el contenido y, en primer lugar, no debería tener el problema.

(probado en la última versión beta de FF y en el último safari)

Answer 2

Parece que el motor de renderizado webkit de Safari no reconoce al principio el cambio de contenido, al menos no lo suficiente como para eliminar el contenido html anterior.Minimizar y luego restaurar las ventanas inicia un evento de redibujado en el motor de renderizado del navegador.

Creo que exploraría 2 vías:Primero, ¿podría usar un iframe en lugar del nodo de 'contenido' actual?Los navegadores esperan que los IFrames cambien, sin embargo, como puede ver, no siempre son tan buenos para cambiar el contenido de DIV u otros elementos.

En segundo lugar, quizás modificando la posición de desplazamiento como se sugirió anteriormente.Simplemente puede mover el desplazamiento nuevamente a 0 como se sugiere o, si eso es demasiado molesto, puede intentar restaurar el desplazamiento después del cambio de contenido.Reste la altura del nodo de contenido antiguo de la posición de desplazamiento actual (restableciendo el desplazamiento del navegador al 0 del nodo de contenido), cambie el contenido del nodo y luego agregue la altura del nuevo nodo a la posición de desplazamiento.

Sin embargo, Palehorse tiene razón (no puedo votar su respuesta en este momento, no hay puntos). Una biblioteca de abstracciones como jQuery, Dojo o incluso Prototype a menudo puede ayudar con estos asuntos.Especialmente si ve que su página/sitio va más allá de la simple manipulación DOM, encontrará que las herramientas y mejoras proporcionadas por las bibliotecas serán de gran ayuda.

Answer 3

Parece que tienes un problema con el propio navegador.¿Este problema sólo ocurre en un navegador?

Una cosa que puedes intentar es usar una biblioteca liviana como jQuery.Maneja bastante bien las diferencias del navegador.Para configurar el HTML interno para un div con el ID de envase simplemente escribirías esto:

$('#container').html( content );

Esto funcionará en la mayoría de los navegadores.No sé si solucionará tu problema específicamente o no, pero puede que valga la pena intentarlo.

Answer 4

¿Funcionaría volver a establecer la posición de desplazamiento en la parte superior (element.scrollTop = 0;elemento.scrollLeft = 0;de memoria) antes de reemplazar el contenido?

Answer 5

Establezca la altura CSS del elemento en "automático" cada vez que actualice InnerHTML.

Answer 6

Intentaría hacer container.innerHTML = '';contenedor.innerHTML = contenido;