javascript - JavaScript 中的 innerHTML 操作

Question

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

container.innerHTML = content;

有时我必须覆盖此节点中以前的一些内容。这很好用，直到以前的内容占用更多的垂直空间然后新的内容会占用并且用户向下滚动页面 - 滚动超过新内容允许的高度，前提是它的高度。

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

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

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

score 4 · Accepted Answer

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

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

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

location.hash = 'ajax-div';

使用它来确保在您更新内容时用户不会向下滚动太多，并且您不应该首先遇到问题。

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

score 1 · Accepted Answer

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

我想我会探索 2 条途径：首先我可以使用 iframe 代替当前的“内容”节点吗？浏览器希望 IFrame 发生变化，但是正如您所见，它们并不总是那么擅长更改 DIV 或其他元素的内容。

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

虽然 Palehorse 是对的（我目前无法投票赞成他的答案——没有分数），像 jQuery、Dojo 甚至 Prototype 这样的抽象库通常可以帮助解决这些问题。尤其是当您看到您的页面/站点超越了简单的 DOM 操作时，您会发现库提供的工具和增强功能非常有帮助。

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

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

于 2008-09-15T17:03:34.937 回答

score 0 · Accepted Answer

0

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

于 2008-09-15T17:04:16.870 回答

6 回答 6