可以使内部链接在客户端生成的 HTML 页面中工作吗？

Question

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

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

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

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

Answer 1

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

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();

跳转到元素。