能否使內部鏈接在客戶端生成的HTML頁面中起作用？

Question

情況：由於各種原因（主要是在不可用Internet的情況下有時會使用它），我正在構建的一些JavaScript繁重的HTML必須能夠有時嚴格在客戶端上運行，而無需服務器。 在大多數情況下，我已經能夠提出解決方法，該方法允許通過常規瀏覽器的“頁面另存為”機制來保存此站點中的頁面，嵌入它們所需的所有內容，並按摩路徑以引用我想要的位置當瀏覽器不夠智能以修復URL時（通常比我想像的多），它們會（在本地計算機上）被定位。

不過，我還無法解決其中的一個問題：每個主頁都可以在新的標簽/窗口中打開幫助頁面。 為此，我將幫助頁面的內容嵌入到保存的主頁面中。 然后，我可以使用helpWindow.document.write(helpContent)來打開它。 問題：就瀏覽器而言，幫助頁面的URL與原始頁面的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

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