Question

我在页面加载时使用JavaScript代码生成HTML。问题是当使用URI片段（如<div class="header"> <h2 md-dialog-title>Delete all</h2> </div> <md-dialog-content #dynamic>Dialog Content</md-dialog-content> <md-dialog-actions> ... </md-dialog-actions>）时，浏览器不会自动滚动到ID为http://example.com/index.html#special-id的元素。至少在Chrome中不会发生这种情况。我认为这不起作用，因为页面首次加载时special-id不存在。只有在运行JavaScript之后才存在。

有没有办法轻松完成这项工作？我总是可以添加JavaScript代码来检查URI片段，并在每次创建具有#special-id属性的新元素时滚动到它。但在我的情况下，这并不总是那么容易，我并不总是控制代码。如果可能的话，我也不想使用id。

Answer 1

假设您知道动态ID，只需在UI构建JS运行完毕后使用history.replaceState更改哈希：

const staticText = Array(1000).join("-").split("-").map(() => "This is some text for spacing purposes.").join("\n");
canvas.innerHTML = staticText + "<div id='dynamic-id'>Hello from JS!</div>"

history.replaceState({}, "Title", "#dynamic-id");

:target {
  background-color: yellow;
  font-weight: bold;
  color: red;
  font-size: 3em;
}
#canvas { white-space: pre-wrap; }

<div id="canvas">Just some unvarnished HTML</div>

URI片段标识符，用于滚动到使用JavaScript生成的元素

1 个答案: