javascript - 可靠地跳转到动态生成页面上的命名 anchor ？

Question

我有一个由客户端动态构建的网页。它会生成数十个列表项，每个列表项都有自己的命名 anchor 。页面的一侧有一个固定的目录 (TOC)，其中包含指向命名 anchor 的超链接。这允许用户单击 TOC 条目跳转到该元素。

我遇到的问题是，在初始页面加载时，页面是动态生成的，因此它无法使用浏览器的默认行为滚动到 URL 初始散列中的元素。此外，当用户切换到另一本书时，页面将完全重新生成，并包含新内容和新的起始哈希值。同样的问题:由于散列预先存在内容，因此它不会将自己与已在 View 中的元素放在一起。

我几乎用 JavaScript 解决了这个问题，方法是等待渲染，然后在适当的元素上使用 scrollIntoView 方法跳转到哈希。

下一个问题是样式表在 scrollIntoView 被调用时没有完全应用，因此元素的最终位置是未知的。我看到未设置样式的元素滚动到 View 中，但一旦应用样式，定位就会丢失。我放置了 1 秒的 setTimeout 来延迟 scrollIntoView 调用。这可行，但感觉很脆弱。

当内容在散列就位后出现时，是否有可靠的技术可以跳转到命名 anchor ？如果我知道 CSS 何时完成样式内容可能会有所帮助。或者，一旦页面高度稳定(从而表明 CSS 样式已完成)触发事件可能会很有用。

Answer 1

我有一个类似的问题，虽然在我的例子中只有目录和命名 anchor 是在加载处理程序中自动生成的 - 而不是页面内容的其余部分。我通过在生成 anchor 后将以下代码添加到我的 onload 处理程序来解决初始哈希问题:

if (location.hash)
{
    var requested_hash = location.hash.slice(1);
    location.hash = '';
    location.hash = requested_hash;
}

我必须先将散列设置为 ''，然后再将其设置回请求的名称以使浏览器响应。这似乎适用于我尝试过的所有浏览器(Opera、Chrome、Edge、IE、FF)。