如何在AJAX页面导航中使用锚的href

Question

I have the following problem: I'm trying to create a HTML5 page based on pure AJAX page navigation. So I have on main page called "index.html". This one holds my css, scripts and the menu. The menu looks like this:

<ul>
    <li><a id="startLink" class="navlink" href="pages/start.html">Start</a></li>
    <li><a class="navlink" href="pages/test.html">Test</a></li>
</ul>

By clicking on one of this anchors I call a JavaScript loading the page under "href" with an AJAX call into a div on "index.html". So my main page never reloads and all the new content is just displayed there in a container. The function looks like this:

$(document).ready(function()
{
var popped = ("state" in window.history && window.history.state !== null), initialURL = location.href;

$(".navlink").click(function(e)
{
    var link    = $(this);
    var href    = link.attr("href");

    loadContent(href);
    window.history.pushState(null, null, href);

    e.preventDefault();
});

$(window).bind("popstate", function(e)
{
    // Ignore inital popstate that some browsers fire on page load
    var initialPop = !popped && location.href == initialURL;
    popped = true;
    if (initialPop) return;

    loadContent(location.pathname);
});

init();
});

function init()
{
    $("#startLink").click();
};

function loadContent(url)
{
    $("main").load(url);
};

I'm using the history.pushState and popstate functions to deal with the browser history and display URLs in the Browser. This just works fine, but now we are coming to my problem.

When I load the index.html, my init() function clicks on the start anchor to display some initial content on the page. Well, now, if I want to go to test.html the browser shows me the path like "Host/Somepath/pages/pages/test.html". Same with start: .../pages/pages/start.html. I guess the reason are my href on the anchors because the browser thinks he has entered my folder pages and shows start.html. From there he wants to navigate to pages/pages/ to go to any other page in my menu. My project structure looks kind of this:

• index.html
• css
• images
• scripts
• pages
  • start.html
  • test.html

Has anyone an idea how i can deal with this issue? I dont want to place all htmls in one folder, i need subfolders to structure the project a bit.

Answer 1

Try with HTML5 localStorage or sessionStorage

Sample Code

window.sessionStorage.setItem('isFirst', true);
$(document).ready(function () {

  if(window.sessionStorage.getItem('isFirst')){
    window.sessionStorage.setItem('isFirst', false);
    //Put your code here. It will work only once
    init();
  }    
});

You can read more about HTML local & session store click