манипулирование innerHTML в JavaScript

Question

Я разрабатываю код веб-страницы, который динамически выбирает контент с сервера, а затем помещает его в узлы-контейнеры, используя что-то вроде

container.innerHTML = content;

Иногда мне приходится перезаписывать некоторое предыдущее содержимое в этом узле. Это работает нормально, пока не произойдет, что предыдущий контент занимал больше вертикального пространства, чем новый, и пользователь прокручивал страницу вниз - прокручивал больше, чем позволял новый контент, при условии его высоты.

В этом случае страница перерисовывается неправильно - остаются некоторые артефакты старого контента. Он работает нормально, и даже можно избавиться от артефактов, свернув и восстановив браузер (или заставив окно перерисовываться другим способом), однако это не кажется очень удобным.

Я тестирую это только в Safari (это веб-сайт, оптимизированный для iPhone).

Кто-нибудь знает, как с этим бороться?

Answer 1

Самое простое решение, которое я нашел, было бы разместить тег привязки <a> в верхней части div, который вы редактируете:

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

Затем, когда вы измените содержимое div, вы можете сделать это, чтобы браузер перешел к вашему тегу привязки:

location.hash = 'ajax-div';

Используйте это, чтобы убедиться, что пользователь не прокручивается слишком далеко при обновлении контента, и вы не должны сразу понимать проблему.

(протестировано в последней бета-версии FF и последнем сафари)

Answer 2

Похоже, что движок рендеринга webkit в Safari сначала не распознает изменение содержимого, по крайней мере, недостаточно для удаления предыдущего HTML-содержимого. Минимизация и последующее восстановление окон инициирует событие перерисовки в механизме рендеринга браузера.

Я думаю, что я исследую 2 пути: сначала я мог бы использовать iframe вместо текущего узла 'content'? Браузеры ожидают изменения IFrames, однако, как вы видите, они не всегда так хороши в изменении содержимого DIV или других элементов.

Во-вторых, возможно, изменив положение прокрутки, как предлагалось ранее. Вы можете просто переместить прокрутку обратно на 0, как предложено, или, если это навязчиво, вы можете попытаться восстановить прокрутку после изменения содержимого. Вычтите высоту старого узла содержимого из текущей позиции прокрутки (сбросив прокрутку браузера до 0 узла содержимого), измените содержимое узла, затем добавьте высоту нового узла в положение прокрутки.

Палехорс прав, хотя (я не могу сейчас оценить его ответ - нет баллов) библиотека абстракций, такая как jQuery, Dojo или даже Prototype, часто может помочь в этих вопросах. Особенно, если вы видите, что ваша страница / сайт выходит за рамки простого манипулирования DOM, вы найдете огромную помощь для инструментов и улучшений, предоставляемых библиотеками.

Answer 3

Я бы попробовал сделать container.innerHTML = ''; container.innerHTML = content;

Answer 4

Установите высоту CSS элемента на 'auto' при каждом обновлении innerHTML.

Answer 5

Будет ли работать, чтобы установить позицию прокрутки обратно вверх (element.scrollTop = 0; element.scrollLeft = 0; наизусть) перед заменой содержимого?

Answer 6

Похоже, у вас проблема с самим браузером. Эта проблема возникает только в одном браузере?

Одна вещь, которую вы можете попробовать - использовать легковесную библиотеку, например jQuery . Он хорошо обрабатывает различия между браузерами. Чтобы установить внутренний HTML для div с идентификатором container , вы просто напишите это:

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

Это будет работать в большинстве браузеров. Я не знаю, решит ли это вашу проблему конкретно или нет, но, возможно, стоит попробовать.