Question

我正在开发一个网页代码，它从服务器动态获取内容，然后使用类似

之类的内容将此内容放入容器节点

container.innerHTML = content;

有时我必须覆盖此节点中的某些先前内容。这样可以正常工作，直到先前的内容占用了更多的垂直空间，然后新的内容将占用并且用户向下滚动页面 - 滚动比新内容允许的更多，只要它的高度。

在这种情况下，页面重绘不正确 - 旧内容的一些工件仍然存在。它工作正常，甚至可以通过最小化和恢复浏览器（或强制窗口以其他方式重绘）来摆脱工件，但这似乎不太方便。

我只在Safari下测试（这是一个经过iPhone优化的网站）。

有人知道如何处理这个问题吗？

Answer 1

我找到的最简单的解决方案是将锚标记<a>放在您正在编辑的div的顶部：

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

然后，当您更改div的内容时，可以执行此操作以使浏览器跳转到您的锚标记：

location.hash = 'ajax-div';

使用此选项可确保在更新内容时用户不会向下滚动太远，并且您不应该首先解决问题。

（在最新的FF测试和最新的野生动物园测试中）

Answer 2

听起来好像Safari的webkit渲染引擎一开始并没有认识到内容的变化，至少还不足以删除以前的html内容。最小化然后恢复窗口会在浏览器的渲染引擎中启动重绘事件。

我想我会探索两种途径：首先我可以使用iframe而不是当前的“内容”节点吗？浏览器希望IFrame能够改变，但是当你看到他们并不总是那么擅长改变DIV或其他元素的内容时。

其次，也许可以通过修改前面建议的滚动位置。您可以根据建议将滚动条移回0，或者如果是突兀的话，您可以尝试在内容更改后恢复滚动。从当前滚动位置减去旧内容节点的高度（将浏览器的滚动重置为内容节点的0），更改节点内容，然后将新节点的高度添加到滚动位置。

Palehorse是正确的（我现在不能投票给他答案 - 没有意义）像jQuery，Dojo甚至Prototype这样的抽象库通常可以帮助解决这些问题。特别是如果你看到你的页面/网站超越简单的DOM操作，你会发现图书馆提供的工具和增强功能是一个巨大的帮助。

Answer 3

听起来你的浏览器本身有问题。这个问题只发生在一个浏览器中吗？

您可能尝试的一件事是使用像jQuery这样的轻量级库。它可以很好地处理浏览器差异。要为ID为容器的div设置内部HTML，您只需写下：

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

这适用于大多数浏览器。我不知道它是否会特别解决您的问题，但可能值得一试。

Answer 4

在更换内容之前，是否可以将滚动位置设置回顶部（element.scrollTop = 0; element.scrollLeft = 0;用心）？

Answer 5

每次更新innerHTML时，将元素的CSS高度设置为“auto”。

Answer 6

我会尝试做container.innerHTML =''; container.innerHTML = content;