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

Question

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

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

例如：帮助中的 ... link页面：如果单击“链接”，浏览器将加载保存的主页面，而不是滚动帮助页面。

我的临时解决方法是当我必须在这种环境中操作时删除这些链接，但我肯定有办法让它们工作。有什么建议吗？建议可能包括完全不同的打开帮助页面的方式。不过，我不想使用 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();
    }
});

Answer 2

您应该阅读以下内容：http://en.wikipedia.org/wiki/Single-page_application

特别尝试：http://en.wikipedia.org/wiki/TiddlyWiki

（抱歉，那这并不能回答你的问题，但如果你没有看到这些，也许你可以从他们那里得到想法。）

编辑：

我尝试了一下，这真的很奇怪！对我来说这几乎就像一个错误。所有浏览器都这样做吗？

解决方案可能是使用 ID 而不是 A NAME （顺便说一句，即使您想通过锚片段链接，您也可以/应该这样做），然后使用

document.getElementById(elID).scrollIntoView();

To 跳转到元素。