Can one make internal links work within a client-side-generated HTML page?

Situation: for various reasons (mainly, that it will be used at times in situations where the Internet is not availble), some JavaScript-heavy HTML I am building has to be able to run at times strictly on the client, with no server involved. For the most part, I've been able to come up with workarounds that allow pages from this site to be saved by the usual browser 'Save Page As' mechanisms, embed all the pieces they need, and massage paths to refer where I want them to (on the local machine) when the browser isn't smart enough to fix the URL (which is more often than I might have thought).

One piece I haven't been able to solve yet, though: each main page can open a help page in a new tab/window. To do that, I embed the content of the help page in the main saved page. Then I can use helpWindow.document.write(helpContent) to open that. Problem: as far as the browser is concerned, the help page ends up with the same URL as the original page, so I can't effectively use page-internal links on that page: it tries to load the main saved page if you click one!

For example: <a name="target" /> ... <a href="#target">link</a> in the help page: if you click "link", the browser loads the main saved page, rather scrolling the help page.

My temporary workaround is to strip these links when I have to operate in this environment, but I'd sure rather have a way to make them work. Any suggestions? Suggestions could include an entirely different way to open a help page. I'开发者_运维知识库d rather not use iframes, though, I'd really like it to stay in a separate tab/window.

---

You can scroll to the bookmark with JavaScript with 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;
    }
}

Or, if you are using jQuery:

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

---

You should read this: http://en.wikipedia.org/wiki/Single-page_application

In particular try: http://en.wikipedia.org/wiki/TiddlyWiki

(Sorry, that this doesn't answer your question, but if you have not see those, maybe you can get ideas from them.)

Edit:

I tried this out a bit, and that's really strange! It almost seems like a bug to me. Do all browsers do this?

A solution could be to use ID instead of A NAME (which BTW you can/should do even if you wanted to link by anchor fragment) and then use

document.getElementById(elID).scrollIntoView();

To jump to the element.