Question

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

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

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

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

Answer 1

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

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

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

编辑：

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

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

document.getElementById(elID).scrollIntoView();

跳转到元素。

Answer 2

您可以使用带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();
    }
});

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

2 个答案: