Обработка innerHTML в JavaScript

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

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

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

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

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

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

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

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

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

Устанавливайте высоту CSS элемента на «auto» каждый раз, когда вы обновляете innerHTML.

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

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

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

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

location.hash = 'ajax-div';

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

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