Manipulation innerHTML en JavaScript

Question

Je développe un code de page Web, qui extrait dynamiquement le contenu du serveur, puis le place dans des nœuds de conteneur à l'aide de quelque chose comme

.

container.innerHTML = content;

Parfois, je dois écraser du contenu précédent dans ce nœud. Cela fonctionne bien jusqu'à ce que le contenu précédent occupe plus d'espace vertical qu'un nouveau contenu ET qu'un utilisateur fait défiler la page vers le bas - défile plus que ne le permet le nouveau contenu, à condition que son hauteur soit optimale.

Dans ce cas, la page n'est pas redessinée correctement. Certains artefacts de l'ancien contenu sont conservés. Cela fonctionne bien et il est même possible de supprimer les artefacts en minimisant et en restaurant le navigateur (ou en obligeant à redessiner la fenêtre), mais cela ne semble pas très pratique.

Je ne teste cela que sous Safari (site Web optimisé pour iPhone).

Quelqu'un a-t-il une idée de la façon de gérer cela?

Answer 1

La solution la plus simple que j'ai trouvée serait de placer une balise d'ancrage <a> en haut de la div que vous modifiez:

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

Ensuite, lorsque vous modifiez le contenu du <=>, vous pouvez le faire pour que le navigateur accède à votre balise d'ancrage:

location.hash = 'ajax-div';

Utilisez cette option pour vous assurer que l'utilisateur ne fait pas défiler l'écran lorsque vous mettez à jour le contenu et que vous ne devriez pas obtenir le problème en premier lieu.

(testé dans la dernière version bêta de FF et le dernier safari)

Answer 2

Il semble que le moteur de rendu Webkit de Safari ne reconnaisse pas au départ le changement de contenu, du moins pas assez pour supprimer le contenu HTML précédent. La réduction et la restauration de la fenêtre initient un événement de redessinage dans le moteur de rendu du navigateur.

Je pense que j'exploiterais deux possibilités: tout d'abord, pourrais-je utiliser un iframe au lieu du nœud "contenu" actuel? Les navigateurs s’attendent à ce que les IFrames changent, mais à mesure que vous les voyez, ils ne sont pas toujours aussi doués pour modifier le contenu de DIV ou d’autres éléments.

Deuxièmement, peut-être en modifiant la position du défilement comme suggéré précédemment. Vous pouvez simplement déplacer le parchemin à 0 comme suggéré ou si cela devait vous gêner, vous pourriez essayer de restaurer le parchemin après le changement de contenu. Soustrayez la hauteur de l'ancien nœud de contenu de la position de défilement actuelle (réinitialisation du défilement du navigateur au 0 du nœud de contenu), modifiez le contenu du nœud, puis ajoutez la hauteur du nouveau nœud à la position de défilement.

Palehorse a cependant raison (je ne peux pas voter sa réponse pour le moment - pas de points), une bibliothèque d’abstraction comme jQuery, Dojo ou même Prototype peut souvent aider à résoudre ces problèmes. Surtout si votre page / votre site dépasse la simple manipulation de DOM, vous constaterez que les outils et les améliorations fournis par les bibliothèques sont une aide précieuse.

Answer 3

On dirait que vous rencontrez un problème avec le navigateur lui-même. Ce problème ne se produit-il que dans un seul navigateur?

Vous pouvez également essayer d’utiliser une bibliothèque légère telle que jQuery . Il gère assez bien les différences de navigateur. Pour définir le code HTML interne d'une div avec l'ID de conteneur , écrivez simplement ceci:

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

Cela fonctionnera dans la plupart des navigateurs. Je ne sais pas si cela résoudra votre problème de manière spécifique ou non, mais cela vaut peut-être la peine d'essayer.

Answer 4

Cela permettrait-il de redéfinir la position de défilement vers le haut (element.scrollTop = 0; element.scrollLeft = 0; par cœur) avant de remplacer le contenu?

Answer 5

Définissez la hauteur CSS de l'élément sur "auto" chaque fois que vous mettez à jour innerHTML.

Answer 6

J'essaierais de faire container.innerHTML = ''; container.innerHTML = content;