javascript - JavaScript 中的 insideHTML 操作

标签 javascript html dom

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

container.innerHTML = content;

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

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

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

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

最佳答案

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

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

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

location.hash = 'ajax-div';

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

(在最新的 FF beta 和最新的 safari 中测试)

关于javascript - JavaScript 中的 insideHTML 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63743/

相关文章:

javascript - HTML/JavaScript : prevent paint before code executes

javascript - 使用 jQuery 隐藏/显示内容

javascript - HTML中如何让DOM元素水平而不是垂直堆叠溢出?

javascript - jQuery Accordion 在子页面上时保持菜单从一页到另一页打开

javascript - href 链接未打开,单击时 Bootstrap 将开放类添加到下拉菜单而不是打开链接

java - 使用普通 W3C 文档和 Apache Batik SVG 光栅器

javascript - React - 组件更新后如何获取真实的 DOM 元素

javascript - 使用 javascript 将 yaml 转换为 json

javascript - Laravel Vue.js 组件注册

html - 如果屏幕分辨率超过显示图像?