JavaScript 中的 insideHTML 操作

题

我正在开发一个网页代码，它从服务器动态获取内容，然后使用类似的方法将此内容放置到容器节点

container.innerHTML = content;

有时我必须覆盖这个节点中以前的一些内容。这工作得很好，直到发生之前的内容占据了更多的垂直空间，然后新的内容占据了更多的垂直空间，并且用户向下滚动页面 - 滚动超过新内容允许的高度，只要其高度即可。

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

我仅在 Safari 下进行测试（这是一个针对 iPhone 优化的网站）。

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

解决方案

我发现的最简单的解决方案是放置一个锚标记 <a> 在顶部 div 您正在编辑：

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

然后当你改变内容的时候 div, ，您可以这样做让浏览器跳转到您的锚标记：

location.hash = 'ajax-div';

使用它可以确保用户在更新内容时不会向下滚动太多，并且一开始就不应该遇到问题。

（在最新的FF beta和最新的safari中测试）

其他提示

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

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

其次，也许可以按照之前的建议修改滚动位置。您可以按照建议将滚动条移回 0，或者如果这太引人注目，您可以尝试在内容更改后恢复滚动条。从当前滚动位置减去旧内容节点的高度（将浏览器的滚动重置为内容节点的0），更改节点内容，然后将新节点的高度添加到滚动位置。

不过，Palehorse 是对的（我现在不能对他的答案投赞成票 - 没有分）像 jQuery、Dojo 甚至 Prototype 这样的抽象库通常可以帮助解决这些问题。特别是如果您看到您的页面/站点超越了简单的 DOM 操作，您会发现库提供的工具和增强功能会提供巨大的帮助。

听起来您的浏览器本身有问题。这个问题只出现在一种浏览器中吗？

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

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

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

将滚动位置设置回顶部是否有效（element.scrollTop = 0;元素.scrollLeft = 0;记住）在替换内容之前？

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

我会尝试做container.innerHTML = '';容器.innerHTML = 内容；

许可以下： CC-BY-SA 和归因