javascript - 能否使内部链接在客户端生成的 HTML 页面中起作用？

Question

情况:由于各种原因(主要是它有时会在互联网不可用的情况下使用)，我正在构建的一些 JavaScript 重的 HTML 必须能够有时严格地在客户端上运行，不涉及服务器。在大多数情况下，我已经能够想出解决方法，允许通过常用浏览器的“页面另存为”机制保存此站点的页面，嵌入他们需要的所有部分，并使用按摩路径来引用我想要的位置当浏览器不够智能，无法修复 URL 时(在本地计算机上)(这种情况比我想象的要频繁)。

不过，我还无法解决一个问题:每个主页都可以在新选项卡/窗口中打开帮助页面。为此，我将帮助页面的内容嵌入到保存的主页面中。然后我可以使用helpWindow.document.write(helpContent)打开那个。问题:就浏览器而言，帮助页面最终的 URL 与原始页面相同，因此我无法有效地使用该页面上的页面内部链接:如果您单击，它会尝试加载已保存的主页面一个!

例如:<a name="target" /> ... <a href="#target">link</a>在帮助页面中:如果单击“链接”，浏览器将加载保存的主页面，而不是滚动帮助页面。

我的临时解决方法是当我必须在这种环境中操作时删除这些链接，但我肯定有办法让它们工作。有什么建议么？建议可能包括完全不同的打开帮助页面的方式。不过，我不想使用 iframe，我真的希望它保留在单独的选项卡/窗口中。

Answer 1

您可以通过 JavaScript 使用 element.scrollIntoView() 滚动到书签:

function goToBookmark(e)
{
    e = e || window.event;
    if (e.preventDefault)
    {
        e.preventDefault();
    }
    e.returnValue = false;
    var bookmarkName = this.href.replace(/^#/, "");
    var bookmark = document.getElementsByName(bookmarkName)[0];
    if (bookmark)
    {
        bookmark.scrollIntoView();
    }
}
for (var i = 0; i < document.links.length; i++)
{
    var link = document.links[i];
    if (/^#/.test(link.href))
    {
        link.onclick = goToBookmark;
    }
}

或者，如果您使用的是 jQuery:

$("a[href^='#']").click(function(e) {
    e.preventDefault();
    var bookmark = $("a[name=" + this.href.replace(/^#/, "") + "]")[0];
    if (bookmark) {
        bookmark.scrollIntoView();
    }
});